BFC神奇背后的原理-文摘

原文：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

• BFC的区域不会与float box重叠。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算BFC的高度时，浮动元素也参与计算

简书上也有一篇介绍BFC作用的文章，写的也不错，https://www.jianshu.com/p/682ae6476a14

建立一个BFC最好的方法使用overflow:hidden

参考

• BFC官网