BFC是什么？

BFC是什么？

W3C对BFC的解释原文:

Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with ‘overflow’ other than ‘visible’ (except
when thatvalue has been propagated to the viewport) establish new
block formatting contexts for their contents.

译文：

浮动、绝对定位元素、不是块盒子的快容器（例如inline-blocks、table-cells和table-captions），以及overflow属性的值除visible以外的块盒，将为其内容建立新的块格式化上下文。

MDN对BFC的描述：

块格式化上下文(Block Formatting Context，BFC)是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

面试被问到可以回答：

BFC是Block Fromatting Context（格式化上下文），它可以理解为是元素的一个隐藏属性，默认的情况下是关闭状态，当元素满足某些条件（即如何开启BFC下方的10项，回答四五个即可）后，该隐藏属性被激活，激活之后能解决三个问题（即开启BFC能解决什么问题下面的三个问题）。

开启BFC能解决什么问题

• 其子元素不会再产生margin塌陷问题
• 自己不会被其他浮动元素所覆盖
• 就算其子元素浮动，元素自身高度也不会塌陷

如何开启BFC

1. 根元素（html）
2. 浮动元素
3. 绝对定位、固定定位的元素
4. 行内块元素
5. 表格单元格: table 、 thead 、 tbody 、 tfoot、th 、td 、 tr、 caption
6. overflow的值不为visible的块元素
7. 伸缩项目
8. 多列容器
9. column-span为all的元素(即使该元素没有包裹在多列容器中)
10. display的值，设置为flow-root

这几种方法在不同的应用场景下可能会产生一些负面的印象，影响最小的是第十项display设为flow-root，但是IE不支持，适应用场景选择不同的方法。

其中flow-root的MDN解释为:

该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。

详细可见尚硅谷2023b站前端css视频