说说bfc 和 HasLayout

你肯定用到过，但你可能从没听过这两单词，刚接触的时候，我实在无法把这两单词与我常作的行为连在一起，纠结了一个下午，我疯了。

 

BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。有人做出很恰当的比喻：

你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

HasLayout    当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）

触发HasLayout

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

触发BFC

• float：left|right
• position：absolute|fixed
• display: table-cell|table-caption|inline-block
• overflow: hidden|scroll|auto