### BFC 是什么 BFC（Block Formatting Context）是 CSS 中的一种布局上下文，它是一个独立的渲染区域，具有一些特定的布局规则。 ### BFC 解决了什么问题 BFC 的出现主要解决了以下几个常见的布局问题： 1. 清除浮动问题，避免父元素塌陷。 2. 防止外边距重叠问题。 3. 控制浮动元素在容器内的布局。 4. 创建独立的渲染环境，避免与浮动元素重叠。 ### BFC 的布局规则 BFC 的布局规则包括： 1. **内部的块级元素垂直排列：** BFC 内部的块级元素会垂直排列，一个元素紧接着另一个元素。 2. **相邻的块级元素外边距不会重叠：** BFC 内部相邻的块级元素的垂直外边距不会发生重叠，它们之间会保留一个最大的外边距值。 3. **浮动元素会被包含在 BFC 内部：** BFC 会包含其内部的浮动元素，不会让浮动元素溢出。 4. **BFC 的区域不会与浮动元素重叠：** BFC 会创建一个独立的渲染环境，不会与浮动元素发生重叠。 5. **BFC 的高度计算方式会考虑浮动元素：** BFC 的高度计算会包括其内部的浮动元素，不会发生高度塌陷。 ### BFC 出现的场景 #### 1. 清除浮动问题当浮动元素未被正确清除时，容器的高度可能塌陷。通过创建 BFC，可以解决这个问题。 ```html

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4586336661274a88a299356c9902eda0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=487\&s=431444\&e=gif\&f=119\&b=eae7eb) 在这个示例中，`container` 容器通过设置 `overflow: hidden;` 创建了一个 BFC。这样，`container` 可以正确计算并包裹内部的浮动元素 `float-left`，避免容器高度塌陷，容器高度为`200px`，当我们把`overflow: hidden`勾掉时，发生容器高度塌陷，`container`容器高度为0。 #### 2. 防止外边距重叠问题在普通文档流中，相邻块级元素的垂直外边距可能会发生重叠。通过创建 BFC，可以避免外边距重叠的问题。 ```html

内容1

内容2

``` ![ezgif-5-f05c8043e1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52445fe6a37f4fd8af8e84699a9bf226~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600&h=385&s=240193&e=gif&f=50&b=f4f1f5) 在这个示例中，`内容1容器`的下外边距与`内容2容器`的上外边距重叠在一起，通过给`内容2容器`添加一个容器并设置为`overflow:hidden` 使其创建BFC。 ##### 思考BFC之外的其它方案使用 padding 或 border 来代替上下边距，因为它们不会与相邻元素的边距发生重叠。 ```html

内容1

内容2

``` #### 3. 控制浮动元素在容器内的布局通过创建 BFC，可以控制浮动元素在容器内的布局方式，使其按照预期排列。 ```html

内容1

内容2

内容3

``` ![ezgif-5-902b309a04.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/828f3293d0a949b4912a5193f196daf1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600&h=375&s=269958&e=gif&f=50&b=f0efef) 在这个示例中，`.container` 元素通过设置 `overflow: hidden;` 创建了一个 BFC。这样，`.float-left` 元素会按照浮动属性排列在 `.container` 容器内。 ### BFC 的触发机制 #### 1. 使用 `overflow: hidden;` 通过为容器元素设置 `overflow: hidden;` 属性，可以创建 BFC，从而解决一些布局问题，如清除浮动、防止溢出等。 ```html

浮动元素

``` ```css .container { overflow: hidden; /* 创建BFC */ } .float-left { float: left; width: 200px; } ``` 在这个示例中，通过在 `.container` 上设置 `overflow: hidden;`，创建了一个新的 BFC。这样，`.container` 将包含浮动元素，并正确计算容器的高度，避免高度塌陷的问题。 #### 2. 使用 `float` 通过将元素设置为浮动，可以创建 BFC，并改变其在布局中的行为，如实现多列布局、文字环绕等。 ```html

左侧元素

右侧元素

``` ```css .float-left { float: left; /* 创建BFC */ width: 50%; } .float-right { float: right; /* 创建BFC */ width: 50%; } ``` 在这个示例中，使用 `float: left;` 和 `float: right;` 分别为两个子元素创建了 BFC。这样，它们将在同一行中并排显示，并且其他内容将环绕在它们周围。 #### 3. 使用 `position: absolute;` 通过将元素设置为绝对定位，可以创建 BFC，并改变其在布局中的行为，如实现叠加效果、避免溢出等。 ```html

绝对定位元素

内容区域

``` ```css .container { position: relative; /* 确保创建定位上下文 */ } .absolute-child { position: absolute; /* 创建BFC */ top: 0; left: 0; width: 200px; height: 200px; } .content { background-color: lightgray; } ``` 在这个示例中，通过将 `.absolute-child` 元素设置为绝对定位，创建了一个新的 BFC。这样，`.absolute-child` 元素将相对于 `.container` 定位，并不会影响其他内容的布局。 #### 4. 使用 `display: flex;` 通过将容器元素设置为 `display: flex;`，可以创建 BFC，并使用 Flexbox 布局来控制其内部元素的排列和对齐方式。 ```html

Flex元素1

Flex元素2

``` ```css .container { display: flex; /* 创建BFC */ justify-content: space-between; } .flex-child { flex: 1; background-color: lightgray; } ``` 在这个示例中，通过为 `.container` 设置 `display: flex;`，创建了一个新的 BFC。这样，`.flex-child` 元素将按照 Flexbox 布局的规则进行排列，并在 `.container` 内部均匀分布。 #### 5. 使用 `display: inline-block;` 通过将元素设置为 `display: inline-block;`，可以创建 BFC，并实现类似块级元素的布局特性，同时保留了行内元素的特点。 ```html

元素1

元素2

``` ```css .container { display: inline-block; /* 创建BFC */ background-color: lightgray; } .inline-block-element { width: 100px; height: 100px; background-color: lightblue; } ``` 在这个示例中，通过将 `.container` 设置为 `display: inline-block;`，创建了一个新的 BFC。这将使 `.container` 具有块级元素的布局特性，并且可以容纳子元素 `.inline-block-element`。 #### 6. 使用 `display: flow-root;` 在 CSS3 中引入了 `display: flow-root;` 属性，它可以直接创建 BFC，而无需使用其他属性的副作用。 ```html

子元素

``` ```css .container { display: flow-root; /* 创建BFC */ background-color: lightgray; } .child { float: left; width: 200px; height: 200px; background-color: lightblue; } ``` 在这个示例中，通过将 `.container` 设置为 `display: flow-root;`，直接创建了一个新的 BFC。这样，`.container` 将包含子元素 `.child`，并正确计算容器的高度，无需使用其他属性来清除浮动。总之，BFC的出现能够提供更可靠的布局控制，解决浮动、外边距重叠、定位、溢出等常见的布局问题。希望能从读者那得到更多的反馈，我会更新的文章中，填补知识盲区，一起成长，共勉~