bfc

BFC

概念

• 块级格式换上下文(block formatting context);
• bfc决定了元素如何对其内部定位,以及元素与元素之间的关系;

产生BFC

• position:absolute/fixed;
• float:不为 none;
• display:inline-block/table/table-cell;
• overflow:不为 visible;

eg:
<div id="wrapper" style="width:300px;">
    <ul id='ul'>
        <li>123</li>
        <li>456</li>
    </ul>
</div>
ul默认的width为auto，即#wrapper的width;
当ul的position:absolute时，ul的width则是其中内容(li的width的总和)。

外边距重叠

产生条件

• 在普通文档流中处于一个BFC中的块级盒子，在垂直方向上会产生重叠。

• 也就是position:absolute与float不为none以及inline-block不会产生外边距重叠。

hasLayout

可以触发hasLayout的有如下CSS属性：

• display:inline-block
• height/width:除了auto
• float:left/right
• position:absolute
• writing-mode(IE专有属性，设置文本的垂直显示):tb-rl
• zoom(IE专有属性，设置或检索对象的缩放比例):除了normal