CSS的BFC——块级格式化上下文

BFC:块级格式化上下文

BFC的基本概念:BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。

父子元素和兄弟元素边距重合，重叠原则是取最大值。空元素的编剧重叠是取margin与padding的最大值。

一、BFC的基本原理

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置；
2. Box垂直方向的距离是由margin决定的，属于同一个BFC的两个相邻的Box会发生重叠；
3. 每个元素的margin Box左边，与包含块的border Box的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动页是如此；
4. BFC在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置float；
5. BFC的区域不会与浮动盒子重叠（清浮动）；
6. 计算BFC的高度时，浮动元素也参与计算。

二、CSS会在什么情况下创建出BFC（即脱离文档流）

• 根元素：即HTML元素（最大的一个BFC）；
• 浮动（float属性不为none）；
• 绝对定位元素：position的值为absolute或fixed；
• 行内块：display为inline-block；
• 表格单元：display为table、table-cell、table-caption、inline-block等HTML表格相关的属性；
• 弹性盒：display为flex或者inline-flex
• 默认值：内容不会被修改，会呈现在元素框之外（overflow不为visible）。

BFC的作用（业务场景）

1. 自适应（三）栏布局（避免队列布局由于宽度计算四舍五入二自动换行）；
2. 避免元素被浮动元素覆盖；
3. 可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）；
4. 去除边距重叠现象，分属于不同的BFC时，可以阻止margin重叠。