BFC

定义

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代码：

  
Sibling 1
  
Sibling 2
  
Sibling 3

CSS代码：

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}

p {
  background-color: lightgreen;
  margin: 10px 0;
}

现在HTML变成：

  
Sibling 1
  
Sibling 2
  

    
Sibling 3
  

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:

  
Sibling
  
Sibling
  

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中）

引用：理解CSS中的BFC(块级可视化上下文)