前端实习面试准备-什么是BFC

BFC，全称为 Block Formatting Context（块级格式化上下文），是Web页面布局中CSS渲染的一个概念。在一个BFC内部，其子元素的布局是独立且不会影响到外部元素的，它规定了内部元素如何与其他元素相互作用以及计算自身尺寸的方式。

BFC的特点：

1. 内部的Box会在垂直方向上一个接一个地放置。
2. Box垂直方向上的margin会发生折叠（仅限相邻且同属于一个BFC的垂直外边距）
3. BFC的区域不会与float元素重叠。
4. BFC可以包含浮动元素。当计算BFC的高度时，浮动元素也会参与高度计算。
5. 每个盒子的左外边缘（对于从左到右的格式化上下文）会触碰到该块格式化上下文的左边缘。
6. 在同一个BFC中的两个相邻块级盒之间的margin会发生折叠。

触发BFC的方式：

• 浮动元素（float值不为 none）
• 绝对定位元素（position值为 absolute或 fixed）
• 行内块元素（display值为 inline-block）
• 表格单元格（display值为 table-cell，HTML表格元素默认行为）
• 弹性元素（display值为 flex或 inline-flex）
• 包含 overflow属性不是 visible的块级元素（如 overflow: auto、overflow: scroll 或 overflow: hidden）

通过创建一个新的BFC，可以解决一些常见的布局问题，例如防止margin塌陷、清除浮动等。同时，BFC还能确保内部元素不会溢出到外部布局中，保持内部布局的完整性。

常见使用场景：

1. 兄弟元素上下margin重叠-》给两个元素都加上标签包裹，并将外包裹标签设置为bfc
2. 浮动元素脱标-》给父元素设置bfc
3. 浮动元素覆盖正常元素-》给正常元素设施bfc