BFC 全称为 block formatting context，中文为“块级格式化上下文”。
“结界”这个词大家应该都理解的，指通过一些特定的手段形成的封闭空间，里
面的人出不去，外面的人进不来，具有极强的防御力。BFC 的特性表现如出一辙。
大家请记住下面这个表现原则：如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻
云覆雨，都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin
重叠是会影响外面的元素的；
BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素
浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违 BFC 元素的子元素不会
影响外部元素的设定。
那什么时候会触发 BFC 呢？常见的情况如下：
• <html>根元素；
• float 的值不为 none；
• overflow 的值为 auto、scroll 或 hidden；
• display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
• position 的值不为 relative 和 static。
换言之，只要元素符合上面任意一个条件，就无须使用 clear:both 属性去清除浮动的
影响了。因此，不要见到一个<div>元素就加个类似.clearfix 的类名，否则只能暴露你孱
弱的 CSS 基本功。
2477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
