[CSS] [2021-02-23 更新] BFC是什么?触发BFC的条件是什么?有哪些应用场景?

[jeddygong]

1.概念

​ BFC(Box Formatting context ):  Box是csS布局的对象和基本单位，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

​ 块级格式化上下文布局规则

• 内部的BOX会在垂直方向一个接一个的放置;
• 属于同一个BFC的两个相邻Box的margin会重叠;不同BFC就不会;
• 是页面上一个隔离的独立容器，里面的元素不会影响到外面的元素;反之亦然;
• BFC的区域不会和float box重叠;
• 计算BFC的高度，浮动元素也参与计算;

2.触发条件

触发条件简要概括：

• 根元素
• float属性不为none
• position为 absolute或fxed
• overflow不 为visible
• display为inline-block, table-cell, table-caption, flex, inline-flex.

触发条件详细介绍：

1. 根元素
2. 浮动元素(元素的float不是none)
3. 绝对定位元素(元素的position 为absolute或fixed)
4. 行内块元素(元素的display为inline- block)
5. 表格单元格(元素的display为table- cell, HTML表格单元格默认为该值)
6. 表格标题(元素的display为table- -caption,HTML表格标题默认为该值)
7. 匿名表格单元格元素(元素的display为table、 table-row、table- -row- group、table -header- group、table- footer- -group (分 别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table)
8. overflow 值不为visible 的块元素
9. display 值为flow- -root 的元素
10. contain 值为layout、 content或paint的元素
11. 弹性元素(display为 flex或inline- -f1ex元素的直接子元素)
12. 网格元素(display为 grid或inline- -grid元素的直接子元素)
13. 多列容器(元素的column- count或column- -width 不为auto, 包括column- count为1)
14. column- -span为all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一一个多列容器中(标准 变更，Chrome bug)。

3.应用场景

1、清除内部的浮动，触发父元素的BFC属性，会包含float元素;

​ 防止浮动导致父元素高度塌陷父级设置overflow:hidden,元素float:right;

2、分属于不同的BFC，可以阻止Margin重叠;

​ 避免margin重叠,两个块相邻就会导致外边距被折叠，给中 间的设置BFC就会避免，方法就是套个父级设置overflow: .hidden

3、阻止元素被浮动元素覆盖，各自是独立的渲染区域;

4、自适应两栏布局