5. 介绍一下 BFC
1、CSS 的 BFC 是什么
参考答案
DETAILS
1、定义：
BFC 是一个独立的渲染区域，其中的元素按照块级布局规则进行布局。在这个上下文中，块级元素会生成块级盒模型，而浮动元素和绝对定位元素会生成浮动盒模型和绝对定位盒模型。BFC 的主要作用是确保其内部的元素按照特定的规则进行布局，而不受外部元素的影响。
2、可以触发 BFC 的情况：
| 属性名称 | 属性 |
|---|---|
| 根元素 | html |
| 浮动元素 | float 的值不为 none |
| 绝对定位元素 | position 的值为 absolute 或 fixed |
| 内联块元素 | display 的值为 inline-block |
| 弹性盒子元素 | display 的值为 flex 或 inline-flex |
| 网格布局元素 | display 的值为 grid 或 inline-grid |
| 多列容器 | column-count 或 column-width 不为 auto |
| overflow | overflow 的值不为 visible。 |
| flow-root | display 的值为 flow-root（CSS3 新增属性）。 |
2、BFC 有什么应用
参考答案
DETAILS
1、清除浮动
浮动元素会导致父元素高度塌陷，通过触发 BFC 可以解决这个问题。例如，设置 overflow: hidden 或 overflow: auto 可以使父元素包含浮动子元素。
<div style="border: 1px solid black; overflow: hidden;">
<div style="float: left;">Left Float</div>
<div style="float: right;">Right Float</div>
</div>
2、 创建独立的布局区域
BFC 可以创建一个独立的布局区域，内部的元素不会受到外部元素的影响。例如，使用 display: flex 或 display: grid 可以创建一个独立的布局区域。
<div style="border: 1px solid black; display: flex;">
<div style="flex: 1; margin-right: 20px;">Box 1</div>
<div style="flex: 1;">Box 2</div>
</div>
3、控制元素的排列方式
通过触发 BFC，可以控制元素的排列方式。例如，使用 float 和 clear 可以控制元素的浮动和清除浮动。
<div style="border: 1px solid black;">
<div style="float: left;">Left Float</div>
<div style="float: right;">Right Float</div>
<div style="clear: both;"></div>
</div>
5、解决绝对定位元素的上下文问题
绝对定位元素会相对于其最近的定位祖先元素进行定位。通过触发 BFC，可以确保绝对定位元素的定位上下文是其父元素。
<div style="border: 1px solid black; position: relative;">
<div style="position: absolute; top: 20px; left: 20px;">Absolute Box</div>
</div>