BFC
BFC是Block Formatting Context （块级格式化上下文）的缩写
我先说一下清除浮动问题。
我们都知道有时候要清除浮动，但为什么要清除浮动？
我们先看一下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="text/html">
<title></title>
<style type="text/css">
.mydiv1{
width: 100px;
height: 150px;
float: left;
background:red;
margin-left: 10px;
}
.mydiv2{
width: 100px;
height: 150px;
background:green;
float: left;
margin-left: 10px;
}
.mydiv3{
width: 100px;
height: 150px;
float: left;
background-color:blue;
margin-left: 10px;
}
.wdiv{
border: 5px solid #000;
width: 500px;
}
</style>
</head>
<body>
<div class="wdiv">
<div class="mydiv1"></div>
<div class="mydiv2"></div>
<div class="mydiv3"></div>
</div>
</body>
</html>
运行结果如图：
可以看到，黑色部分我并没有设置高度，但按理来说，应该是被子元素撑满（也就是自适应子元素的高度）,但事实并没有。
之所以会这样，是因为父容器并没有把浮动的子元素包裹起来，通常也叫塌陷
这时候我们就需要清除浮动了（好像讲的和BFC没关系，别急，在后面）
我们给父元素添加属性 （overflow:hidden;）
也就是：
.wdiv{
border: 5px solid #000;
width: 500px;
overflow: hidden;
}
然后我们再运行一下代码：
发现结果如图：
没错，这就是我们想要的效果。
那么为什么会这样？
这就涉及到了BFC的知识：
当我们为父容器添加属性 overflow:hidden; 后，父容器生成BFC，有了BFC，在计算父容器高度时，父容器内的浮动元素也会被计算进去（我通俗理解成，假如父容器没有设置高度，变成BFC会用BFC的计算方式重新计算父元素高度）
那么什么情况下会创建BFC?
CSS规范说明了在下列这些情况下会创建新的BFC：
浮动元素（float: left | right）；
绝对定位元素（position: absolute | fixed）；
行内块元素（display: inline-block）；
表格的单元格（display: table-cells，TD、TH）；
表格的标题（display: table-captions，CAPTION）；
‘overflow’ 特性不为visible 的元素（除非该值已经传播到viewport?）；
表格元素创建的"匿名框"
注意，“display:table” 本身并不产生"BFC"。但是，它可以产生匿名框，其中包含"display:table-cell" 的框会产生块格式化上下文。总之，对于"display:table" 的元素，产生块格式化上下文的是匿名框而不是"display:table"
注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下。
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
最后：
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
文章参考：https://www.cnblogs.com/chencyl/p/3948331.html