CSS BFC

BFC的定义

BFC决定了元素对其内容进行定位，以及与其他元素的关系和相互作用。

创建了BFC的元素中，子元素会依次放置。两个相邻的元素之间的垂直距离取决于margin特性。相邻的块级元素的垂直边距会折叠。

每个元素左外边与包含块的左边想接触，即使存在浮动也是如此（一个元素的内容区域由于浮动而压缩），除非这个元素新建一个新的BFC。

浮动元素会形成BFC，浮动元素内部子元素只要受该浮动元素影响，两个浮动元素之间互不影响。

怎样才能形成BFC

• float的值不为none
• overflow的值不为visible
• display的值为table-cell，table-caption，inline-block中的任何一个
• position的值不为relative和static

BFC的作用

不和浮动元素重叠

一个浮动元素后面跟着非浮动元素，就会产生覆盖现象，自适应两栏布局。

清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom: 1

嵌套元素margin边距折叠问题的解决

只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，包括相邻元素、嵌套元素，只要它们之间没有阻挡（例如边框、非空元素，padding）就会发生margin重叠。

解决margin重叠，让它们不在同一个BFC即可。

IE HasLayout

下列元素默认具有layout：

• html、body
• table、tr、th、td
• img
• hr
• input、button、select、textarea、fieldset、legend
• iframe、embed、object、applet
• marquee

下列CSS属性和取值将让元素获得layout：

• position: absolute
  • 绝对定位元素的包含区块
• float: left|right
• display: inline-block
• width/height 除auto外的任意值
• zoom 除normal外的任意值

IE7中引入的hasLayout成员

• overflow: hidden|scroll|auto
• position: fixed
• min-width 任意值
• max-width 除none之外的任意值
• min-height 任意值
• max-height 除none之外的任意值