重学CSS（10）—— 深入理解BFC结界

1.CSS的结界——BFC

BFC是block formatting context的缩写，中文名为“块级格式化上下文”。前面也多次提到了这个听起来十分拗口的属性，那么CSS设计这个属性的初衷是什么呢？

记住一句话：拥有BFC特性的元素会形成类似“结界”的封闭内部空间，该元素内部的元素以及该元素本身都不会影响外部元素的表现。要理解这句话，还得通过一些例子来证明，在举例证明之前，我们必须得知道一件事，就是CSS规定了哪些属性可以生成BFC属性，常见的情况如下：

• float不为none的元素。
• overflow的值为auto，scroll或hidden。
• display的值为inline-block，table-cell或table-caption。
• position的值不为relative和static

在知道了哪些元素拥有BFC属性后，我们就可以愉快的测试了。

由于一个元素拥有BFC，因此其内部子元素再怎么变都不能影响到外面的元素，这句话仿佛在哪里见过？没错，读过上一章的小伙伴应该还记得float元素导致父容器高度坍塌的问题，因此如果float元素的父容器拥有BFC特性会发生什么呢？实践出真知，试一试不就知道了吗。

<!-- BFC -->
<div style="display: inline-block;">
    <div style="float: left;">我的父元素有BFC,我是左浮动</div>
    <div style="float: right;">我的父元素有BFC,我是右浮动</