BFC

块级格式化上下文 (Block Fromatting Context)

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

BFC 是Block Formatting Context （块级格式化上下文） 可以解决页面的一些布局

1.BFC区域不会被float 覆盖

2.BFC区域计算高度包括浮动元素

3.子元素都靠左对齐

4.子元素会在垂直方向，一个一个地放置

5.子元素垂直距离由margin决定

6.BFC是一个独立容器，子元素不会影响到外部元素

布局 

1.左侧固定，右侧自适应宽度

.column1 { float: left; width: 200px; height: 300px; margin: 0 10px; background-color: red; }

.column2 { overflow: hidden; height: 300px; background-color: purple; }

2.左右两侧固定，中间自适应

.column1, .column2 { float: left; width: 200px; height: 300px; margin: 0 10px; background-color: red; }

.column2 { float: right; }

.column3 { overflow: hidden; height: 300px; background-color: purple; }