CSS对display,position,和float之间关系的定义

对‘display’，‘position’和‘float’之间关系的定义

影响框的生成和布局的三个属性——’display’，’position’和’float’——间的相互关系如下：

1.display值是none

如果’display’设置为’none’，用户端必须忽略掉’position’和’float’。在这种情况下，元素不产生框。若display不是none，则继续

2.‘position’ 的值是 ‘absolute’ 或 ‘fixed’

‘display’设置为’block’且’float’设置为’none’。框的位置将由’top’，’right’，’bottom’和’left’属性和该框的包含块确定。

也就是说，当元素是绝对定位时，浮动失效，’display’ 会被按规则重置。

若position不是absolute或fixed，则继续

3.float的值不是none

如果’float’的值不是’none’，’display’设置为’block’并且该框浮动。 若float是none

4.元素是根元素

如果元素是根元素，display值按照对应表设置，否则，按照5

5.应用指定的display特性值

注：即如果’position’设置为’absolute’或’fixed’且‘float’的值不为‘none’，display的值就会被设置为‘block’，所以设置display: inline; float: left;等同于float:left，display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。

position:absolute和float会隐式的改变display类型，

不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。

float在IE6下的双倍边距bug就是利用添加display:inline来解决的

注意一点的是，position:relative并不能够隐式的改变display的类型

文章参考：http://blog.csdn.net/github_34514750/article/details/51895897
http://zccst.iteye.com/blog/2193102