定义
BFC(块级格式化上下文)
一个BFC是一个至少满足以下一个条件的盒子：
1.float不为none
2.overflow不为visible
3.display为table-cell, table-caption或者inline-block, flex, inline-flex
4.position不为static或者relative
5.根元素
它们将会建立一个新的块级格式化上下文。
用处
1.利用BFC可以消除Margin Collapse（还可以用padding消除Margin Collapse)
HTML代码：
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<p>Sibling 3</p>
</div>
CSS代码：
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
现在HTML变成：
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
CSS也有改变：
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}
2.利用BFC去容纳浮动元素(还可以用clearfix清除浮动)
HTML:
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
CSS:
.container {
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
我们现在让container形成BFC规则，结果如下：
.container {
overflow: hidden; /* creates block formatting context */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
3.3.利用BFC阻止文本换行(还可以用margin-left阻止文本换行)
为p建立BFC即可
特征：
1.内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
2.处于同一个BFC中的元素相互影响，可能会发生margin collapse；
3.每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
5.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
6.BFC的区域不会与float的元素区域重叠
7.BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。（一个元素不能同时存在于两个BFC中）
