BFC--块格式化上下文

[huandie2012]

一直没有去深究BFC，定义化的东西总是要实践化才能更好的理解，这篇文章分享一些我对BFC的理解。 BFC（block formatting context）又叫块格式化上下文，简单来说BFC就是一种属性，这种属性会影响元素的定位以及与其兄弟元素之间的相互作用，但是BFC属于普通流，因此它对兄弟元素也不会造成什么影响。 注意： 这里需要说明一下，BFC 并不是元素，而是某些元素带有的一些属性，因此，是上面这些元素产生了 BFC ，而它们本身并不是 BFC ，这个概念需要区分清楚。 从样式上看，具有BFC的元素与普通容器没什么区别，但是从功能上，具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器没有的一些特性，例如可以包含浮动元素，使用overflow方法清除浮动就是触发了浮动元素的父元素的BFC，使得它可以包含浮动元素，从而防止出现高度塌陷的问题。 触发BFC的条件： 浮动元素，float 除 none 以外的值； 绝对定位元素，position（absolute，fixed）； display 为以下其中之一的值 inline-blocks，table-cells，table-captions； overflow 除了 visible 以外的值（hidden，auto，scroll）； 在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件： display 的 table-caption 值； position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点； 从整体上看，BFC 是隔离了的容器，这个具体可以表现为三个特性：

1. BFC 会阻止外边距折叠 外边距折叠规则：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此，阻止外边距折叠只需产生新的 BFC 。 demo地址：http://kayosite.com/demo/bfc.html#bfc-1
2. BFC 可以包含浮动的元素 这是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。 解决“高度塌陷”问题，“高度塌陷”就是子元素浮动之后脱离了文档流，其父元素相当于一个空标签，没有高度和宽度，上下边框重叠在一起（如果设置了上下边框的话）。
3. BFC 可以阻止元素被浮动元素覆盖 浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 BFC 后可以阻止这种情况的发生。 值得注意的是：当浮动元素宽度和它的非浮动兄弟元素宽度之和没有超出父元素宽度时，非浮动兄弟元素会处于浮动元素的旁边，不会被其覆盖；但当浮动元素宽度和它的非浮动兄弟元素宽度都没有超过父元素宽度，且两个元素的宽度加起来超出了父元素宽度的时候，非浮动元素会下降到下一行，即处于浮动元素下方。 BFC 与 hasLayout： 对于*zoom：1；这是IEhack，因为 IE6-7 并不支持 W3C 的 BFC ，而是使用私有属性 hasLayout 。