一，BFC定义，
全称，block formatting content,格式化上下文；是web页面中盒模型布局中的css渲染模式，是一个独立的渲染区域或说一个隔离的独立容器。
二，造成条件
1，浮动元素，float除none以外的值。
2，定位元素，position(absolute，fixed)
3,display为inline-block,table-cell,table-caption(相似于表格题目标签caption)
4，overflow除visible以外(scroll,hiddle,auto)的值.
三，个性
1，外部的BOX会在垂直方向一个接着一个放。
解释：即便不在BFC的内的盒子也是一样的。
2，垂直方向的间隔由margin值决定。
解释：失常文档流中，盒子的垂直距离也是由高低盒子的最大margin决定的。
利用：因而能够用overflow:hidden触发BFC机制，将该属性加载父元素上。扯个题外话，用空标签也是能解决外边距合并问题。
3，BFC区域内的元素不会和float元素重叠，
解释：不会被浮动元素笼罩
利用：
两栏布局：右边固定，左边自适应布局。
float: left; width: 200px;height: 300px;（右边元素）overflow: hidden;/*创立bfc */height: 300px;（左边元素）三栏布局（圣杯布局）左右两边固定宽度，两头不设宽，因而两头的宽度自适应。
float: left; width: 100px; height: 300px;（右边元素）float: right; width: 100px; height: 300px;（左边元素）overflow: hidden;/*创立bfc*/ height: 300px;（两头元素）4,计算bfc的高度时，浮动元素也参加计算。
解释:BFC蕴含浮动的块。
利用：利用overflow:hidden革除浮动嘛，因为浮动的盒子无奈撑出处于规范文档流的父盒子的height。
5，BFC就是页面上的一个独立容器，容器外面的子元素不会影响里面元素。
利用：解决外边距合并问题。
<div class="container"> <div class="wrapper"> <div class="box1"></div> </div> <div class="box2"></div> </div>.container { overflow: hidden; width: 100px; height: 100px; } .wrapper { overflow: hidden; } .box1 { height: 20px; margin: 10px 0; } .box2 { height: 20px; margin: 20px 0; }