BFC

什么是BFC

BFC(Block Formatting Context)：格式化上下文，是Web页面中盒模型布局的css渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。它决定了其子元素如何定位，以及与其他元素的相互作用关系。

BFC的生成

满足下列CSS声明之一的元素就会生成BFC

1. 根元素或者其他包含它的元素
2. float的值不为none
3. overflow不为visible的值
4. position为absolute或者fixed的
5. display的值为inline-block，table-cell，table-caption
6. 元素的display为flex或者inline-flex

BFC的布局规则

1. 内部的元素会在垂直方向一个接一个的排列，可以理解为是BFC中的一个常规流
2. 元素垂直方向的距离由margin决定，即同属于一个BFC的两个相邻的盒子的margin可能会发生重叠
3. 每个元素的左外边距与包含块的左外边距相接触，即使存在浮动的情况下也是如此，这说明BFC的子元素不会超出它的包含块
4. BFC区域不会与float元素区域重叠
5. 计算BFC高度的时候，浮动的子元素也参与计算.
6. BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

作用

解决margin塌陷

清除浮动问题

解决侵占浮动元素的问题——->两栏布局

浮动的元素会脱离文档流，然后覆盖在文档流元素上，当一个元素浮动，另外一个不浮动的时候，浮动的元素会因为脱离文档流而盖在不浮动的元素上。所以我们为非浮动元素建立BFC环境，根据BFC的不和float box重叠的规则，就会解决侵占元素问题。