CSS：BFC 最熟悉的陌生人

BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。BFC就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。

初探BFC

我们先看看CSS布局的基本单位：

1. block-level box: display 属性为 block, list-item, table 的元素，会生成 block-level box，并且参与 block formatting context
2. inline-level box: display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box，并且参与 inline formatting context

那这个formatting context又是什么玩意儿？
它是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。也就是说我们平时在布局的时候，它默默地提供了一个环境，使得HTML元素在这个环境中按照一定规则进行布局。
最常见的formatting context有Block Formatting Context(BFC)和Inline Formatting Context(IFC)，CSS3中还增加了GridLayout Formatting Context(GFC)和Flex Formatting Context(FFC)，这里就不深入研究了。
BFC定义：它是一个独立的渲染区域，只有block-level box参与，其中的元素按照规定的渲染规则进行布局，并且这个区域与外部毫不相干。

BFC的布局规则与触发规则

刚才我们说到BFC中的元素有一套规定的布局规则：

• 内部的元素会在垂直方向一个接一个地放置
• 元素垂直方向的距离由margin决定，属于同一个BFC的两个相邻元素的margin会发生重叠
• 每个元素的左外边距与包含块的左边界相接触(对于从左往右，否则相反)，即使存在浮动也是如此
• BFC的区域不会与float元素重叠
• 计算BFC的高度时，浮动元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此

刚才我们又提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素来决定，CSS2.1中规定满足下列CSS声明的元素便会生成BFC（触发规则）：
根元素

• float的值不为none
• overflow的值不为visible
• position的值为absolute或fixed
• display的值为inline-block, table-cell, table-caption, flex, inline-flex

注：display: table也认为可以生成BFC，主要原因是table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC上面这些CSS声明的元素生成了BFC，而它们本身并不是BFC，这一点需要区分。

BFC的应用

说了这么多有用没用的，我们平时布局的时候到底怎么应用呢：
1.防止垂直margin重叠
有点布局经验的朋友都知道margin collapse，也就是相邻的垂直元素同时设置了margin后，实际margin值会塌陷到其中较大的那个值。其根本原理就是它们处于同一个BFC，符合“属于同一个BFC的两个相邻元素的margin会发生重叠”的规则。
我们可以在其中一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便属于不同的BFC，就不会发生margin重叠了：

 
 
    
我属于一个BFC
    

        
我属于另一个BFC
    

Paste_Image.png

如果是我的话会直接设置200px，或者只设置其中一个元素的margin（懒可以偷，但原理需知道）
2.防止浮动子元素高度塌陷

 
 
    

        
float: left
        
float: left
    

Paste_Image.png

如果我们将.parent元素的overflow: hidden去掉，那么.parent元素就获取不到浮动元素的高度了。但是加上overflow属性后触发了BFC，计算BFC的高度时，浮动元素也参与了计算。
3.防止文字（或其他元素）环绕

 
 
    

        
float: left
        
我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕
    

正常情况下，如果一个块级元素设置成了float，那么他的兄弟元素会环绕其布局。这里我们给.text加上overflow，文字所在的区域就产生了BFC，元素的左边总是触碰到容器的左边，即使存在浮动也是如此。
这里举例了几个比较经典的应用，我们在以后的布局中也可以慢慢探索其中的奥秘之处，做一个能写一手好样式还能懂原理的前端er。

学习前端的同学注意了！！！
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入前端学习交流群461593224，我们一起学前端！