--- highlight: a11y-dark theme: smartblue --- 本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了 `BFC` 以及利用 `BFC` 解决外边距重叠问题。 ## 块级格式化上下文(BFC) **BFC**（ `Block Formatting Context` ） **什么是 BFC** `BFC` 是一个独立的区域，它内部的元素都依照它的规则渲染，并且不会与 `BFC` 外部打交道。 **BFC 的布局规则** - 内部的盒子会在垂直方向，一个个地放置； - 盒子垂直方向的距离由 `margin` 决定，属于同一个 `BFC` 的两个相邻盒子的上下 `margin` 会发生重叠； - 每一个元素的左边，与包含块的左边相接触（对于从右往左的布局，则相反），即使存在浮动也是如此； - `BFC` 的区域不会与 `float` 重叠； - `BFC` 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此； - 计算 `BFC` 的高度时，浮动元素也參与计算。 - 当一个元素设置了新的 `BFC` 后，就和这个元素外部的 `BFC` 没有关系了，这个元素只会去约束自己内部的子元素。 **以下方式会创建 BFC** - **overflow**：不为 `visible`； - **float**：不为 `none`； - **display**：为 `inline-block`、`table`、`table-cell`、`table-caption`、`flex`、`inline-flex`、`grid`、`inline-grid`、`flow-root`； - **position**：为 `absolute` 或者 `fixed`；可以简单的理解成 `OFDP` ，当面试官问到你的时候，你回答个 `OFDP`，面试官大概率就知道你理解这个知识点了。 ## 父子元素边距重叠 **场景一**：先来看这段代码，预计实现的结果应该是父容器距离页面顶部 `100px`，子容器距离父容器 `100px` 。 ```html

``` 但是我们却得到了这样的结果，父容器距离页面上方 `100px` ，但是子容器和父容器之间却没有距离。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74b8d4671ba74a9cad8b1d7fcf82d5b3~tplv-k3u1fbpfcp-watermark.image?) **场景二**：再来看这段代码，预计实现的结果应该是父容器紧贴页面顶部，子容器距离父容器 `100px` 。 ```html

``` 结果还是一样的，子容器和父容器之间没有距离，父容器却和页面顶部产生了距离，这是怎么回事呢？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74b8d4671ba74a9cad8b1d7fcf82d5b3~tplv-k3u1fbpfcp-watermark.image?) **现象**：发生了边距重叠，一个盒子和其子孙的边距重叠。 **规则**：正正取最大，负负取最负，正负就相加。 **原因**：根据规范，一个盒子如果没有添加 `BFC`，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠。 **解决**：通过给父容器添加` overflow: hidden` 属性，使之成为 `BFC` 。 ```js .container { overflow: hidden; } ``` 这回就是我们想要的结果了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d89435eb8e84b4aab73933a6004ec49~tplv-k3u1fbpfcp-watermark.image?) **原理**：`BFC` 在页面上是一个独立的容器，父子/外部/内部互不影响。 ## 兄弟元素边距合并 **场景三**：再来看这段代码，两个兄弟元素，一个下边距是 `100px` ，另一个上边距 `100px` ，预计的结果是两个兄弟元素之间的距离是 `200px` 。 ```html

``` 但是两个兄弟元素之间的距离只有 `100px` 。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c560a82521d4f1296db726695696ddf~tplv-k3u1fbpfcp-watermark.image?) **现象**：发生了边距重叠，两个兄弟元素的上边距和下边距发生了重叠。 **规则**：正正取最大，负负取最负，正负就相加。 **原因**：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距。 **解决**：通过给其中一个兄弟元素添加父容器并添加` overflow: hidden` 属性，使之成为 `BFC` 。 ```html

``` 这回就是我们想要的结果了。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9357b7ca5bfd4f108d32e6874c570a73~tplv-k3u1fbpfcp-watermark.image?) **原理**：属于不同 `BFC` 的元素垂直方向边距不会发生重叠。 ## 空元素边距合并 **场景四**：两个兄弟元素之间有四个空元素，每个空元素有 `25px` 的 `margin-top`，预计的结果是两个兄弟元素之间的距离是 `100px` 。 ```js

``` 但是结果却是只有一个空元素的距离，也就是 `25px`。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b320cc678324116ba5244a9fa375ad9~tplv-k3u1fbpfcp-watermark.image?) **现象**：发生了边距重叠，所有的空元素的边距重叠成一个空元素的边距。 **原因**：如果一个块级元素没有任何内容并且设置了 `margin-top` 和 `margin-bottom` 时会发生 `margin` 合并。 **解决**：给每一个添加父容器并添加 `overflow: hidden` 属性，使之成为 `BFC` 。 ```html

``` 这样就达到了我们的目的。但是这种情况实际应用场景几乎没有，了解一下就行。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c560a82521d4f1296db726695696ddf~tplv-k3u1fbpfcp-watermark.image?) **原理**：属于不同 `BFC` 的元素垂直方向边距不会发生重叠。感觉有帮助的小伙伴请点赞👍支持一下，谢谢~