先说说FC,FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。
它是页面中的一块渲染区域。而且有一套渲染规则,它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用。BFC和IFC都是常见的FC。
分别叫做Block Fomatting Context 和Inline Formatting Context。
BFC
BFC(Block Formatting Context)叫做“块级格式化上下文”。BFC的布局规则例如以下:
1.内部的盒子会在垂直方向,一个个地放置;
2.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;
3.每一个元素的左边,与包括的盒子的左边相接触,即使存在浮动也是如此;
4.BFC的区域不会与float重叠;
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此;
6.计算BFC的高度时,浮动元素也參与计算。
介绍过了BFC的布局规范,再来说说哪些元素会产生BFC。
1.根元素。
2.float的属性不为none;
3.position为absolute或fixed;
4.display为inline-block。table-cell,table-caption。flex;
5.overflow不为visible
接下来说说BFC的作用和原理
首先看看自适应两栏布局
我们先定义两个div:
<div class="aside"></div> <div class="main"></div>
然后定义css:
div { 300px; } .aside { 100px; height: 150px; float: left; background: black; } .main { height:200px; background-color:red; }
效果图例如以下:
这正满足了规范的第三条:
每一个元素的左边,与包括的盒子的左边相接触。即使存在浮动也是如此。
所以假设我们须要将黑色区域撑到红色的左边。就须要利用规范的第四条:
BFC的区域不会与float重叠。
也就是说我们须要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC:
.main { overflow:hidden; height:200px; background-color:red; }
完整代码链接:
接下来看看清除内部浮动
首先是父div套子div
<div class="parent"> <div class="child"></div> </div>
然后是css:
.child { border:1px solid red; 100px; height:100px; float:left; } .parent { border:1px solid black; 300px; }
效果例如以下:
能够看到,父div压根就没有被撑开。
我们再回想一下BFC规范中的第六条:
计算BFC的高度时,浮动元素也參与计算。
所以我们须要将父div触发为BFC,也就是将其overflow设为hidden:
.parent { border:1px solid black; 300px; overflow:hidden; }
效果例如以下:
能够看到父div已经撑开了。
再谈谈margin重叠问题。
先定义两个垂直的div:
<div class="p"></div> <div class="p"></div>
然后定义margin:
.p { 200px; height:50px; margin:50px 0; background-color:red; }
能够看到margin重叠后的效果:
我们再看看BFC规范的第二条:
盒子垂直方向的距离由margin决定,属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC,所以我们须要两个div不属于同一个BFC。
为第二个div套一个父亲div。然后讲其overflow设为hidden来激活一个BFC就能够使margin不再重叠。
<div class="p"></div> <div class="wrap"> <div class="p"></div> </div>
.wrap { overflow:hidden; }
效果例如以下: