BFC
BFC
在块格式化上下文中，盒子的布局方式如下：
- 从包含块的顶部开始，从上往下一个接一个的垂直排布，两个盒子之间的间隙取决于
margin属性，并且会发生外边距重叠的现象； - 每个盒子左边缘接触包含块的左边缘（如果是从右到左的书写方式，则接触右边缘）。即使是浮动元素也是如此，除非这个浮动的盒子创建了新的格式化上下文。
根据 W3C 的规范来看，以下情况可以创建块格式化上下文：
根元素
<html>整体属于块格式化上下文float属性不等于none元素position:absolue，或position:fixed的绝对定位元素生成块容器，但是非块盒的元素，例如
display属性值为inline-block，table-cell或者table-captiondisplay:flow-root可以创建没有副作用的块格式化上下文，不会对容器元素本身造成任何影响生成块盒子，且
overflow属性值不是默认值visible的元素
BFC 的应用
关于 BFC 的应用，如盒模型所介绍的那样，首先它能解决父元素和子元素的外边距重叠问题，也能解决相邻元素之间的外边距重叠问题。
其次 BFC 能清除float带来的副作用，float元素会脱离正常流布局，其宽度和高度无法被正确计算，导致其周围元素会出现包裹在float元素周围或者与其发生重叠的现象。此时如果float所在的包含元素创建了块级格式化上下文就能解决float带来的影响。