BFC原理与清除浮动的关系

1. BFC（Block Formatting Context）

    规定了块级盒子（block-level box）格式化的规则，是一个独立的渲染区域，且这个区域与外部不相关。

2. 哪些元素会生成BFC（根据这个规则，改变标签属性，激活BFCC，清除浮动）

•     根元素；
• float不等于none；
• position：absolute or fixed；
• display：inline-block, table-cell, table-caption, flex, inline-flex;
• overflow不为visible;

3. BFC布局规则

• 内部Box会在垂直方向，一个接一个地放置；
• Box垂直方向的间距，由margin决定，属于同一个BFC的margin会重叠；
• 每个元素的margin Box的左边，与包含border Box 的左边相接触，即使存在浮动也是如此；
• BFC的区域不会和float区域重叠；
• BFC就是页面上一个隔离的独立容易，容器里面的子元素不会受到外面元素的影响；
• 计算BFC的高度时，浮动元素也参与计算；

4. 例子：参照http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html中；

5. 小结

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。