应用浮点数时的css显示属性

Question

当元素浮动时,不同的显示属性如何影响布局？或者,这些类之间有什么区别(如果有的话):

div.foo {
    display: block;
    float: left;
}

div.foo2 {
    display: inline;
    float: left;
}

div.foo3 {
    display: inline-block;
    float: left;
}

编辑:

如果根据规范没有差异,那么某些过时版本的浏览器(ahem,IE)会以不同的方式呈现它们吗？

Answer 1

如果我正确阅读了规范,并且练习确认了这一点,无论如何设置float: left或right覆盖display属性并强制display: block元素(虽然有特殊性,见下文),所以你的三个例子之间没有区别:

left 元素生成一个浮动到左侧的块框.内容从盒子的右侧开始流动,从顶部开始(受"清除"属性限制).

right 类似于'left',除了盒子向右浮动,内容从盒子的左侧流动,从顶部开始.

无 盒子没有浮动.

与正常情况不同display: block,设置float指示其自身关于覆盖display属性的宽度的行为:如果没有明确指定宽度,则浮动元素将占用所需的宽度,而不是标准块元素占用100的行为%宽度自动.