display,position和float之间的关系

作者：zccst

[b]对‘display’，‘position’和‘float’之间关系的定义[/b]
英文原文：[url]http://dbaron.org/css/test/sec0907[/url]
影响框的生成和布局的三个属性——'display'，'position'和'float'——间的相互关系如下：
1，如果'display'设置为'none'，用户端必须忽略掉'position'和'float'。在这种情况下，元素不产生框。
2，否则，'position'设置为'absolute'或'fixed'，'display'设置为'block'且'float'设置为'none'。框的位置将由'top'，'right'，'bottom'和'left'属性和该框的包含块确定。
3，否则，如果'float'的值不是'none'，'display'设置为'block'并且该框浮动。
4，否则，应用指定的其它'display'属性。
即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’，display的值就会被设置为‘block’，所以设置display: inline; float: left;等同于float:left，display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。


[b]position:absolute和float会隐式的改变display类型，[/b]
不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。
float在IE6下的双倍边距bug就是利用添加display:inline来解决的
注意一点的是，position:relative并不能够隐式的改变display的类型


[b]The three properties display, float, and position interact in certain ways.[/b]

If an element’s display property is set to none, no box is generated. In this case, float and position are ignored.

If an element’s position property is set to absolute or fixed, it’s absolutely positioned. In this case, float is ignored (the computed value is none).

For absolutely positioned elements, floated elements (elements whose float property is set to left or right), and the root element, the computed value for display is set according to Table 1.

Otherwise, the computed value for display is the same as the specified value.