BFC BFC - 锐客网

块级格式化上下文 (Block Fromatting Context)
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
【BFC】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; }