《前端面试之BFC》

[wangsiyuan0215]

《前端面试之BFC》

什么是 BFC ？ 英文全称 Block Format Context 的缩写，简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。

需要使用 BFC 的场景：解决 margin 层叠、文字环绕、浮动元素的父元素高度有误 这些问题；

集中比较常见的触发 BFC 的条件：

1. 根元素或包含根元素 ???;
2. 浮动元素 float: left / right；
3. 位置属性设置为 position: absolute / fixed；
4. 行内块元素 display: inline-block；
5. 表格单元格 display: table-cell；
6. overflow 值不为 visible 的块元素；
7. 弹性元素 display: flex；
8. 网格元素 display: grid；
9. 等等...