自适应布局

什么时候会触发BFC呢？常见的如下：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

 

在BFC中能担任自适应布局重任的也就是：

1. overflow:auto/hidden IE7+
2. display:inline-block IE6/IE7
3. display:table-cell IE8+

由于overflow有剪裁和出现滚动条等隐患，不适合作为整站通用类，于是，最后，类似清除浮动的通用类语句：

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: ''; display: table; clear: both;
}

两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：

.cell {
    display: table-cell; width: 9999px;
    *display: inline-block; *width: auto;
}

这就是zxx.lib.cssCSS样式库中.cell的由来！

当然，由于和浮动元素合作，清除浮动还是要的，于是，就有了.fix + .l/.r + .cell的无敌组合，可以多栏，也可以无限嵌套。

如果是局部，且确认安全；或有连续英文字符换行的隐患，你也可以使用.fix + .l/.r + .ovh的无敌组合，可以多栏，也可以无限嵌套。

本文来自张鑫旭