一、什么是BFC？
BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
二、BFC的生成
-
浮动元素
-
绝对定位元素
-
overflow值不为visible的块级盒子 -
当然，root 元素会自动生成一个BFC，这个应该很好理解,毕竟需要一个根BFC来布局
三、BFC环境下的执行规则
-
在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的。每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反）
-
相邻两个盒子之间的垂直的间距是被 margin 属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直 margin 是折叠的。从而导致了经典的外边距折叠问题，而发生折叠的主要原因是因为他们两个块级盒子在同一个BFC的环境下，解决办法是让他们俩个不在同一个BFC就ok啦
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
经典浮动元素的塌陷问题：一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题
下例中一旦内部的红色盒子浮动，蓝色盒子就无法被撑起，高度会变成0。原因就是因为浮动元素创建了一个新的BFC，红色盒子成为了一个独立的容器，不会影响到外面的父元素了。它的定位规则不再受制于这个父元素了。只要在在父元素加上overflow:hidden可以清除浮动，原因就是overflow:hidden可以生成一个新的BFC，而这个浮动的子元素，被它所包含了，从而成为一个独立容器，它的 float 外溢不了了，外面的元素不再受其浮动的影响，从而达到了清除浮动的作用
<style>
.蓝色{
width:150px;
background:#ADD9E6;
margin:20px 0;
}
.红色{
width:100px;
height:100px;
background:#FFCCCC;
margin:20px 0;
//float:left;
}
</style>
<div class="蓝色"><div class="红色"></div></div>
四、BFC的常规作用
-
解决外边距重叠
-
解决子元素浮动，父元素高度塌陷
-
解决浮动元素周围文字环绕问题
<style>
.outer {
width: 400px;
overflow: hidden;
background-color: #eee;
}
.float {
width: 200px;
height: 100px;
background-color: #1c88d3;
float: left;
margin-right: 20px;
}
.text {
/* 创建BFC环境*/
overflow: auto;
}
</style>
<div class="outer">
<div class="float">I am a floated element.</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto corporis, deleniti dicta dolores eum expedita
explicabo ipsum magni numquam porro provident quae quam quas quibusdam repellendus sed unde voluptate
voluptatibus.
</div>
</div>
给text元素创建BFC前
给text元素创建BFC后
\
