关于BFC的定义及应用总结

BFC的定义

BFC（Block formatting context）块级格式化上下文，BFC里面的元素与外面元素隔离，使得里外元素的定位不会相互影响。

不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），有Block formatting context（BFC）和Inline formatting context（IFC）等。

BFC内部布局规则

BFC作为一种 Formatting Context，是脱离文档流的，其内部具有特殊的布局规则，掌握其内部的布局规则，对于理解BFC所产生的效果及应用都是有帮助的。

1. 内部的Box（行盒和块盒）会在垂直方向，一个接一个地放置；
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；（应用：防止垂直方向margin重叠）
3. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（应用：两栏自适应）
4. BFC的区域不会与float box重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。（应用：清除浮动）

BFC触发条件

1. 根元素
2. overflow不为visible的块元素
3. float
4. position:absolute或fixed
5. display:inline-block或table-cell或table-caption或flex

BFC的应用

防止垂直方向margin重叠

同一个 BFC 下垂直方向的margin会发生折叠，为避免外边缘的重叠，可以将两个容器放在不同的BFC中

清除浮动（BFC内部可以包含浮动元素）

父元素不设置高度，子元素设定浮动，则会脱离了文档流，发生高度坍塌，这时可以触发BFC，使得BFC内部包含浮动元素。

阻止元素被浮动元素覆盖，自适应布局

这个方法可以用来实现两列或三列自适应布局

二列布局

//左固定，右自适应
<div class="left"></div>
<div class="content"></div>

.left{
   height:100px;
   width:100px:
   float:left;
   background-color:#000000;
}

.content{
   height:100px;
   width:100000px://足够大
   display:table-cell;
   background-color:#000fff;
}

三列布局

//左右固定，中间自适应
<div class="left></div>
<div class="right"></div>
<div class="content"></div>
/*这里注意顺序*/

.left{
   height:100px;
   width:100px:
   float:left;
   background-color:#fff000;
}

.right{
   height:100px;
   width:100px:
   float:right;
   background-color:#000000;
}

.content{
   height:100px;
   width:100000px://足够大
   display:table-cell;
   background-color:#000fff;
}