'display'，'position'与'float'之间的关系

总结： 右侧两个分支绝对定位和float正是触发BFC的条件，触发BFC后元素会被格式化为块级元素

9.7 'display'，'position'与'float'之间的关系

这3个属性影响盒的生成及布局—'display'，'position'和'float' —间的相互影响如下：

1. 如果'display'值为'none'，那么'position'和'float'不会生效。此时，元素不生成盒
2. 否则，如果'position'值为'absolute'或者'fixed'，盒是绝对定位的，并且'float'的计算值为'none'。那么display就根据下表来设置，盒的位置将由'top'，'right'，'bottom'和'left'属性和盒的包含块决定
3. 否则，如果'float'值不为'none'，那么盒是浮动的，'display'根据下表来设置
4. 否则，如果该元素是根元素，'display'根据下表来设置，但指定值'list-item'应该变成计算值'block'还是'list-item'，在CSS 2.1中是未定义的
5. 否则，其它'display'属性值（计算值）就用指定值

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
其它	与指定值相同

 

 

参考：http://www.ayqy.net/doc/css2-1/visuren.html#propdef-position