面试官：谈谈你对BFC的理解？

深藏阁楼爱情的钟 2022-11-16 10:45 211阅读 0赞

![5742017054dbdd2373f29a7f367b5a64.png][]

## 一、是什么 ##

我们在页面布局的时候，经常出现以下情况：

*  这个元素高度怎么没了？
 *  这两栏布局怎么没法自适应？
 *  这两个元素的间距怎么有点奇怪的样子？
 *  ......

归根究底是元素之间相互的影响，导致了意料之外的情况，这里就涉及到`BFC`概念

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

*  内部的盒子会在垂直方向上一个接一个的放置
 *  对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
 *  每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
 *  BFC的区域不会与float的元素区域重叠
 *  计算BFC的高度时，浮动子元素也参与计算
 *  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

`BFC`目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

## 二、触发条件 ##

触发`BFC`的条件包含不限于：

*  根元素，即HTML元素
 *  浮动元素：float值为left、right
 *  overflow值不为 visible，为 auto、scroll、hidden
 *  display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
 *  position的值为absolute或fixed

## 三、应用场景 ##

利用`BFC`的特性，我们将`BFC`应用在以下场景：

#### 防止margin重叠（塌陷） ####

页面显示如下：

![3ff237a54e297f2909a5fbb099573271.png][]

两个`p`元素之间的距离为`100px`，发生了`margin`重叠（塌陷），以最大的为准，如果第一个P的`margin`为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个`BFC`的俩个相邻的盒子的`margin`会发生重叠

可以在`p`外面包裹一层容器，并触发这个容器生成一个`BFC`，那么两个`p`就不属于同一个`BFC`，则不会出现`margin`重叠

这时候，边距则不会重叠：

![215a49ea02b9969e9eb4701fbfafcb89.png][]

#### 清除内部浮动 ####

页面显示如下：

![2394eb360ab1857d6eec7395704c1bed.png][]

而`BFC`在计算高度时，浮动元素也会参与，所以我们可以触发`.par`元素生活才能`BFC`，则内部浮动元素计算高度时候也会计算

.par {
        overflow: hidden;
    }

实现效果如下：

![5559ed6f2bf40b758197636b57d9354b.png][]

#### 自适应多栏布局 ####

这里举个两栏的布局

效果图如下：

![b2171846ea0e9c91abbdcce8466845c3.png][]

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然`.aslide`为浮动元素，但是`main`的左边依然会与包含块的左边相接触

而`BFC`的区域不会与浮动盒子重叠

所以我们可以通过触发`main`生成`BFC`，以此适应两栏布局

.main {
        overflow: hidden;
    }

这时候，新的`BFC`不会与浮动的`.aside`元素重叠。因此会根据包含块的宽度，和`.aside`的宽度，自动变窄

效果如下：

![4b4a961f40d8095b3eeefcfad04fcbd4.png][]

### 小结 ###

可以看到上面几个案例，都体现了`BFC`实际就是页面一个独立的容器，里面的子元素不影响外面的元素

## 参考文献 ##

*  https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block\_formatting\_context
 *  https://github.com/zuopf769/notebook/blob/master/fe/BFC%E5%8E%9F%E7%90%86%E5%89%96%E6%9E%90/README.md

\--The End--

系列正在更新：6/20

点击下方卡片解锁更多

![f4ca2ae1b8ca4f23cb13a148b97417c9.png][]

创作不易，星标、点赞、在看 三连支持

[5742017054dbdd2373f29a7f367b5a64.png]: /images/20221022/0152b305df22457fb821a84cd39d2fd2.png
[3ff237a54e297f2909a5fbb099573271.png]: /images/20221022/83bdca14027a4ba193935bed0a6986eb.png
[215a49ea02b9969e9eb4701fbfafcb89.png]: /images/20221022/5cbe0c794edc47ce88a11c598002716b.png
[2394eb360ab1857d6eec7395704c1bed.png]: /images/20221022/66c39e51810b4f3b9436ab3f8546cab3.png
[5559ed6f2bf40b758197636b57d9354b.png]: /images/20221022/57355d6fce8f448e90a4fced2f543f20.png
[b2171846ea0e9c91abbdcce8466845c3.png]: /images/20221022/97c04079373d4b499db8ee8d37a7d1d8.png
[4b4a961f40d8095b3eeefcfad04fcbd4.png]: /images/20221022/9a9fa3854536496aae4bf16f3f060584.png
[f4ca2ae1b8ca4f23cb13a148b97417c9.png]: /images/20221022/b83b75ccd44542d193f54ec102a8487e.png