你肯定用到过，但你可能从没听过这两单词，刚接触的时候，我实在无法把这两单词与我常作的行为连在一起，纠结了一个下午，我疯了。
BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。有人做出很恰当的比喻：
你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。
HasLayout 当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）
触发HasLayout
* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min- (任意值)
* max- (除 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