BFC是什么？

BFC（块级格式化上下文）：是一个独立的渲染区域， 它规定了内部的**块级盒子**如何布局，同时与这个区域外部不相关。

1. BFC布局规则：

1. 内部的盒子会在**垂直方向**，一个接一个放置。
2. 盒子垂直方向的距离，由margin决定。**属于同一个BFC的两个相邻盒子的margin会发生重叠**
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float 元素重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

2. 会生成BFC的元素

1. 根元素
2. float属性不为none的其他
3. position为absolute或fixed时
4. display为inline-block时
5. overflow不为visible的其他

3. 总结

浮动定位和清除浮动只会应用于在同一个BFC的元素，浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动；

总结：只要让父盒子形成BFC的区域，那么它就会清除区域中浮动元素带来的影响。