css基础篇（四）——BFC
1.BFC(Block Formatting Context)是什么
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器里box的布局，与这个容器外的好不相干。
赶脚听不懂，说人话(举个栗子)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>无标题</title> |
<style type="text/css"> |
body{margin:0;padding: 0;} |
#red,#green,#blue,#yellow{width:100px;height:100px;float:left;} |
#red{background-color:red;} |
#green{background-color:green;} |
#blue{background-color:blue;} |
#yellow{background-color:yellow;} |
</style> |
<div id="c1"> |
<div id="red"></div> |
<div id="green"></div> |
</div> |
<div id="c2"> |
<div id="blue"></div> |
<div id="yellow"></div> |
</div> |
<p>o0o0o0o0o0</p> |
效果如图：
场景描述：该段代码本意要形成两行两列的布局,但#red,#green,#blue,#yellow 设置了float：left;使得这四个div在同一个布局环境BFC中，因此虽然它们位于两个不同的div（#c1和#c2）中，但仍然不会换行，而是一行四列的排列
在说解决方案之前先说说BFC是怎么产生的?
2.怎么产生BFC
当一个HTML元素满足下面任何一个条件都会产生BFC
- (1)float的值为none(如上面栗子：四个div设置了float：left，则在同一个BFC中)
- (2)overflow的值不为visible
- (3)display的值为table-cell,table-caption,inline-block;
- (4)position的值为absolute,fixed
解决方案：若要使之形成两行两列的布局，就要创建两个不同的布局环境，也可以说要创建两个BFC(上文红字已有说明,创建两个BFC后,每个BFC里的box都不会影响当前BFC意外的元素)
方法一：设置overflow让#c1,#c2都产生两个BFC
#c1,#c2{
overflow: hidden;
}
上面创建了两个BFC。内部元素的做浮动不会影响到外部元素。所以#c1和#c2没有受到浮动的影响，仍然各自占据一行
方法二：设置position让#c1,#c2都产生两个BFC
#c1{
position: absolute;
}
#c2{
position: absolute;
top: 100px;
}
3.BFC的作用
BFC作用都是根据BFC的特性来解决一些问题,这里先总结一下BFC的特性
- (1)内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- (2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- (3)每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
- (4)BFC的区域不会与float box叠加。
- (5)计算BFC的高度时，浮动元素也参与计算。
3.1 浮动元素重叠现象
场景描述:如图：上图中红块设置了float：left与没有产生BFC的蓝块发生了重叠
解决方法：根据特性4，对蓝块使用任何一种产生BFC的条件就行
3.2 清除浮动
CSS2.1 规范中，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算
CSS2.1 规范中在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。(特性5)
解决方案：触发外部容器BFC，高度将重新计算。比如给outer加上属性overflow:hidden触发其BFC。
