什么是CSS BFC ?BFC 的定义 BFC 作用清除浮动包裹浮动避免边距塌陷清除浮动第一个是清除浮动，假如

BFC 的定义

bfc block formatting context 块级格式化上下文

是页面上用于渲染css 的一个区域。相当于一个小布局。

块级元素和浮动元素会根据这块区域进行布局。

BFC 作用

清除浮动
包裹浮动
避免边距塌陷

清除浮动

第一个是清除浮动，假如我们有一个 div 容器，class 为 container，里边有两个元素：

一个是 class 为 float 的 div 元素，它里边有一段较短的文字。
另一个是 p 元素，它里边有一段较长的文字：

<div class="container">
  <div class="float">这是浮动的文字</div>
  <p>
    这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落这是一段很长的段落
  </p>
</div>

这里 class 为 float 的 div 元素会设置 float 属性为 left，让它向左边浮动，p 元素保持默认：

.float {
  float: left;
}

这里可以看到 p 中大段的文字是围绕在 float 元素周围的，在超过 float 元素高度之后，p 中的文字直接到了容器的最左边：

如果我们想要保持 p 中的文字一直是在右边自己的盒子里，那么我们可以为 p 元素创建一个 BFC，设置 p 元素的 display 属性为 flow-root：

.container p {
  display: flow-root;
}

这样 p 元素就会在自己的 CSS BFC 中进行布局，从而会严格顺着左边距布局文本。

包裹浮动

BFC 的第二个作用是包裹浮动，这里继续用上例中类似的结构，不过把文字都改成较短的：

<div class="container">
  <div class="float">这是浮动的文字</div>
  <p>这是一段普通的段落</p>
</div>

在这里，我们把 class 为 float 的 div 元素再设置一个较大的高度，让它超出容器的高度：

.float {
  float: left;
  height: 150px;
}

那么这个时候，容器的高度并不会适应浮动元素的高度，而是保持和 p 元素的高度一致：

如果想让容器根据浮动元素的高度而增长，那么我们可以为容器创建一个 CSS BFC，给 container 设置 display: flow-root：

.container {
  display: flow-root;
}

这样容器的高度就和浮动元素的高度保持一致了。

避免边距塌陷

CSS BFC 的第三个作用是避免边距塌陷，假设在一个 div 元素里有一个 p 元素：

<div class="container">
  <p>这是一个段落</p>
</div>

如果我们同时给 div 容器和 p 元素设置 margin-bottom 底部边距，那么边距塌陷的情况就会出现，p 元素的底部边距会被取消：

.container {
  margin-bottom: 20px;
  background: hsl(240deg, 10%, 85%);
}

.container p {
  margin-bottom: 10px;
  background: hsl(200deg, 50%, 80%);
}

这里为了显示区别，给容器背景设置为了灰色，p 元素背景设置为了蓝色，可以看到现在只显示了 p 元素的蓝色背景，因为发生了边距塌陷，p 元素距离容器底部的 10px 的灰色部分没显示出来：

这个时候我们为容器创建一个 BFC，设置 display: flow-root：

.container {
  display: flow-root;
}

那么 p 元素会在这个新的 BFC 中进行布局，边距也会生效了，这样下边距 10px 空出来的地方，就会显示容器的灰色背景：

小结

好了，这个就是 CSS 创建 BFC 的方法和 CSS BFC 的作用，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！

什么是CSS BFC ?

清除浮动

包裹浮动

避免边距塌陷​

小结​

避免边距塌陷

小结