一、什么是BFC
首先引用一下WC3对BFC的专业解释
「BFC」（Block Formatting Context）：翻译成中文叫做块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，其提供了一个环境，元素在这个环境中按照一定的规则进行布局排列
换句话说，BFC就是为元素提供一个独立的容器，在该容器里按照一定的规则进行布局排列，该容器内的元素不会影响外部的元素，同理，外部的元素也不会影响内部的元素
二、如何触发BFC
先来了解一下有哪些条件可以触发BFC：
float不为none
position为absolute或fixed
overflow不为visible
display为inline-block或table或flow-root
后续的案例中，但凡遇到需要触发BFC的，都可以按照这四个条件来使用
三、BFC的相关案例
官方的解释非常的难以理解，那么我们就用几个例子来详细了解BFC的使用
(1)清除浮动
首先来看一个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> <style> .parent{ width: 350px; background-color: red; } .child{ float: left; width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: lightblue; } </style> </head> <body> <div class="parent"> <div class="child1 child">1</div> <div class="child2 child">2</div> <div class="child3 child">3</div> <div class="child4 child">4</div> </div> </body> </html>
该html文档在浏览器中的样式如下图所示
很明显，这是一个子元素浮动无法撑开父元素的例子
产生这种情况的原因很简单，有以下两点：
- 父元素没有设置
height
- 子元素设置了
float浮动，脱离了文档流
因子元素脱离了文档流，父元素无法统计到子元素的大小，因此子元素无法将父元素撑开，所以我们就要将浮动清除
那么我们平时是如何「清除浮动」的呢？最常见的可能就是给父元素添加样式 overflow: hidden 了，其实这种方法就触发了BFC，在父元素内部形成了一个独立的环境，按照BFC的布局规则，该容器内的元素都会被统计到，因此浮动就被清除了
清除浮动后的效果如下图所示
其实通过我们上述说到的触发BFC的条件都可以实现上述效果，这里就不做过多的展示了
既然讲到了清除浮动，我们就来看一下除了上述说到的方法，还会用到什么办法呢？
- 在最后一个子元素后面添加一个空元素，并给予样式
clear: both
- 给父元素设置一定的高度
(2)margin-top塌陷
另一个例子就是「margin-top塌陷」，如图
当前子元素在父元素框内，并且上面紧贴父元素上边缘，此时我们想让子元素的上边缘与父元素的上边缘拉开一段距离，实现如下图所示的效果
因此我们第一个想到的就是给子元素添加 margin-top，可结果却不如人意，效果如下图所示
实际效果就是，我们给子元素添加了 margin-top，但却是父元素整体与上一个元素拉开了距离，这就是我们常见的 「margin-top塌陷」 的问题
很明显，对子元素进行布局时影响到了其它元素的布局，因此我们可以通过给父元素添加一定的样式来触发BFC，使其内部形成一个独立的环境，这样就不会影响到其它元素的布局了
这里再做一个补充，针对 「margin-top塌陷」，我们还可以对父元素设置一个大小不为0的边框 border，这样也能解决问题
