BFC 的定义：
- 对元素设置 float, absolute, inline-block (table-cell, table-caption)
- 对块级元素设置 overflow: hidden | auto;
后，这些元素不是块级元素，但会有块级特性。即形成了BFC（块级格式上下文）。
形成BFC后，该区域就是一个独立的空间，可以和其他容器之间作区分。
同一个BFC中，元素布局就会像普通文档流一样，从上到下，从左到右；浮动元素的布局就按照浮动元素特性的布局。当然同一个BFC内会存在外边距合并。
但是两个BFC内的元素不会相互影响，不会有外边距合并。
形成 BFC 主要可以解决由于浮动导致父元素高度塌陷的问题。
- 1.通过形成BFC来解决
html代码
<div class="ct">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
对应的CSS
.ct{
border: 1px solid red;
}
.box{
float: left;
width: 50px;
height: 50px;
background-color: green;
margin: 20px;
}
形成 BFC 后：
.ct{
border: 1px solid red;
position: absolute;
/*或者
float: left | right;
display: inline-block;/*table-cell|table-caption*/
overflow: hidden | auto;
*/
}
.box{
float: left;
width: 50px;
height: 50px;
background-color: green;
margin: 20px;
}
形成BFC可以解决浮动导致的父元素高度塌陷问题，但是父元素本身也会因为CSS设置，形成特定的特性（如浮动，绝对定位等）。
- 2.还可以通过清除浮动来解决该问题。
.ct{
border: 1px solid red;
}
.ct:after{
content: '';
clear: both;
display: block;/*必须是block*/
}
