CSS3 总结（二十一）——BFC

BFC

Block formatting content直译为（块级格式化上下文）。他是一个独立的区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干（就是BFC盒子里面怎么布局都不影响外面的布局，个人觉得这个就是以前所学知识的一个综合，感觉有点废话，可能是我前面学习时接触过一些该知识点的缘故吧）。

注意：不是所有元素模式都能产生BFC，产生BFC需要满足下面条件

条件
display属性为block，list-item（也可以认为是块级元素），table的元素，会产生BFC。

元素触发BFC需满足以下条件之一即可（可以拥有BFC不代表已经触发了）：

条件
1.float属性不为none。
2.position为absolute或fixed。
3.display为inline-block、table-cell、table-caption、flex、inline-flex。
4.overflow不为visible，通常用overflow：hidden，因为副作用小。

BFC元素的特征：

BFC布局规则特性
1.BFC中，盒子从顶端开始垂直地一个接一个排列（限制为块元素来说，这不是废话么）
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（吐槽：哪个盒子不是这样。BFC元素给了margin-left值还不是跟普通元素盒子一样碰不到边缘。）
4.BFC的区域不会与浮动盒子产生交集，而是紧贴浮动的边缘。（意思是在BFC元素内有两个元素，一个浮动，一个也设置为BFC元素，该子BFC元素不会被浮动元素覆盖。）
5.计算BFC的高度时，自然也会检测浮动的盒子高度。（意思是当BFC盒子没设置高度，一般元素当子元素浮动时会出现高度为0的的问题，而BFC会自动计算浮动元素的高度，因而避免了高度为0，这点还是有用的。）

BFC的主要用途：

用途	说明
1.清除元素内部浮动	只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow：hidden样式，对于IE6加上zoom：1就ok了。（主要利用了BFC元素自动检测浮动盒子的高度的特点）
2.解决外边距合并问题。	创建不属于同一个BFC，就不会发生合并。（意思是BFC元素内有一个要调整margin值的元素和再有一个BFC元素，子BFC元素里面包含另一个要调整margin的元素）
3.制作右侧自适应的盒子	普通流元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。（主要利用BFC的区域不会与浮动盒子产生交集，而是紧贴浮动的边缘的特性）