BFC的概念
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
它是一个独立的渲染区域，只有块级元素参与，它规定了内部的Block level Box如何布局，并且与这个区域外部好不相干。
BFC能解决的问题
- 浮动定位
- 消除外边距折叠
- 清除浮动
- 自适应多栏布局
- ...
BFC的创建
下列方式会创建BFC
- 根元素或包含根元素的元素
- 浮动元素(float不为none)
- 绝对定位元素(position为absolute或者fixed)
- display为inline-block,table-cell,table-caption
- overflow值不为visible
- 弹性元素(flex布局)
- 网格元素(grid布局)
BFC的约束规则
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
BFC的应用
-
防止margin重叠
<body> <p>top</p> <p>bottom</p> </body> <style> p { 100px; height: 100px; background: yellow; line-height: 100px; margin: 10px; text-align: center; } </style>展现效果：
两个div中间的间距为10px,而不是20px,因为它们处于同一个BFC
解决方案为给第二个div再包一层div，设置其overflow属性,使它们处于不同的BFC：
<body> <p>top</p> <div> <p>bottom</p> </div> </body> <style> p { 100px; height: 100px; background: yellow; line-height: 100px; margin: 10px; text-align: center; } div { overflow: auto; } </style>效果：
-
让浮动内容与周围内容等高
看如下例子：
<div class="box"> <div class="float">浮动元素</div> <p>未浮动元素</p> </div> <style> .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .float { float: left; 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; } </style>产生的效果：
由于浮动，使得浮动元素的高度高于旁边的元素，解决方式为使父box生成一个BFC，如下：
<div class="box"> <div class="float">浮动元素</div> <p>未浮动元素</p> </div> <style> .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; overflow: auto; } .float { float: left; 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; } </style>效果如下：
