应用浮点数时的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

如果我正确阅读了spec，并且练习确认了这一点，那么设置float: left或right会覆盖display属性并强制display: block元素（虽然有特殊性，见下文），所以你的三个例子之间没有区别：

  

<强>左   该元素生成一个浮动到左侧的块框。内容从盒子的右侧开始流动，从顶部开始（以'clear'属性为准）。

     

从右   类似于“左”，除了盒子向右浮动，内容从盒子的左侧流动，从顶部开始。

     

<强>无   盒子没有漂浮。

与普通display: block不同，设置float指示其自身在覆盖display属性的宽度方面的行为：如果未明确指定宽度，则浮动元素将占用尽可能多的宽度，而不是自动占据100％宽度的标准块元素行为。