先说说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：
然后定义css：
div {
width:300px;
}
.aside {
width: 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;
}
效果例如以下：
完整代码链接：
http://codepen.io/brizer/pen/yNxEbK
接下来看看清除内部浮动
首先是父div套子div
然后是css：
.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}
.parent {
border:1px solid black;
width:300px;
}
效果例如以下：
能够看到，父div压根就没有被撑开。
我们再回想一下BFC规范中的第六条：
计算BFC的高度时，浮动元素也參与计算。
所以我们须要将父div触发为BFC，也就是将其overflow设为hidden：
.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}
效果例如以下：
能够看到父div已经撑开了。
再谈谈margin重叠问题。
先定义两个垂直的div：
然后定义margin:
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
能够看到margin重叠后的效果：
我们再看看BFC规范的第二条：
盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC，所以我们须要两个div不属于同一个BFC。
为第二个div套一个父亲div。然后讲其overflow设为hidden来激活一个BFC就能够使margin不再重叠。
.wrap {
overflow:hidden;
}
效果例如以下：
发表评论