前言
在我之前的一篇文章关于文档流的文章：文档流是什么？怎么脱离文档流？中有这么一个现象，block块（box1）无视了float元素（box2），而其内部的内联元素被顶了起来，在某些场景下这种情况是我们所不希望看见的。
如图：
我们该怎么解决这个问题呢？这就需要有请我们接下来的正题——BFC
BFC是什么？
BFC即Block Formatting Contexts，按字面意思来讲就是块格式化上下文，也就是说他是一块被格式化的不受外界影响的区域。
html中元素被设置成一个个盒子（不太了解盒模型的同学可以参考一下我这篇文章：css之盒模型），当一个盒子变成BFC以后，其内部的元素也就不会再受到外部的影响，外部也不会受到其内部影响，变成了一个封闭的盒子。
所以简单来将，我们可以将BFC看作是一种CSS属性，触发这种属性以后，元素就会变成一个封闭的盒子。
怎么触发BFC？
那么，我们该怎么触发BFC呢？
BFC并不是某种单独的css属性，BFC依靠别的属性来触发，简单来说，如果我们设置了某些css属性，就会触发BFC。
| 触发方式 |
|---|
| 根元素 |
| 浮动元素（元素的float不是none） |
| 绝对定位元素（元素的position为absolute或fixed） |
| display属性中有很多都会触发，常用的来讲不是block就行（flex、inline-block等都可以触发） |
| overflow值不为visible的块元素 |
| contain值为layot、content或paint的元素 |
| 多列容器（元素的column-count或column-width不为auto，包括column-count为1） |
BFC解决了哪些问题？
1.避免被浮动元素覆盖
这个其实就是我们开头提到的问题，当块级元素左边有一个左float的元素时，基于float的机制，块级元素将无视它。从而产生了浮动元素覆盖的现象。而块级元素内部的内联元素也遵照机制，浮动在浮动元素周围。
代码：
<style>
.box1{
width: 100px;
height: 100px;
background: blue;
}
.box2{
width: 200px;
height: 200px;
background: red;
}
.float{
float: left;
}
</style>
<body>
<div class="box1 float">box1</div>
<div class="box2">box2</div>
</body>
效果：
将box2变成BFC以后我们发现，这一次box2并没有无视box1。究其根本就是因为BFC互相不受影响的性质。
代码：
.box1{
width: 100px;
height: 100px;
background: blue;
}
.box2{
overflow: hidden;
width: 200px;
height: 200px;
background: red;
}
.float{
float: left;
}
</style>
<body>
<div class="box1 float">box1</div>
<div class="box2">box2</div>
</body>
效果：
2.清除浮动(高度塌陷)
如果子元素为浮动元素，那么它就会半脱离文档流，这样一来就相当于不在父元素容器内了，父元素就会出现高度塌陷的情况。
代码：
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.box2{
display: block;
border: 1px solid red;
}
.float{
float: left;
}
</style>
<body>
<div class="box2">
<div class="box1 float">
</div>
</div>
</body>
效果：
但是如果我们给父元素设置BFC，那么子元素虽然半脱离文档流，但是仍然相当于处于父元素这个不受外部影响的容器内，所以就可以撑起父元素的高度。
代码：
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.box2{
overflow: hidden;
display: block;
border: 1px solid red;
}
.float{
float: left;
}
</style>
<body>
<div class="box2">
<div class="box1 float">
</div>
</div>
</body>
效果：
3.外边距重叠
当两个相邻的元素之间都设置有外边距时，就会出现外边距重叠的情况（只保留成大的那个），父子元素之间也会出现。
代码：
<style>
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
效果：
这个属于是正常现象，但是我们有时候并不希望这样，这时候就可以通过用BFC元素去包裹他们，从而取消两个元素之间的互相影响。
代码：
<style>
.bfc{
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
</style>
<body>
<div class="bfc">
<div class="box1">
</div>
</div>
<div class="bfc">
<div class="box2">
</div>
</div>
</body>
效果：
总结
BFC是作为前端的入门问题，在现在的面试过程中也经常会问到，想要真正理解它还是需要上手去操作、去实验。在写代码的过程中很多东西我们不仅要知其所以，还要知其所以然，只有这样才能逐步成长，解决衍生问题乃至利用它去开发。
原文链接：https://juejin.cn/post/7343138527418728483 作者：进击的七崽
