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

Question

当一个元素浮动时，不同的显示属性如何影响布局？或者，这些类之间有什么区别（如果有的话）：

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

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

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

编辑：

如果根据规范没有差异，那么某些过时版本的浏览器（嗯，IE）是否会以不同的方式呈现它们？

Answer 1

如果我正确阅读了spec，并且实践证实了这一点，设置float: left 或right 将覆盖display 属性并强制display: block 在元素上（尽管具有特殊性，见下文），所以您的三个示例之间没有区别：

左 该元素生成一个向左浮动的块框。内容在框的右侧流动，从顶部开始（受 'clear' 属性限制）。

正确 类似于 'left'，只是盒子向右浮动，内容从盒子的左侧开始流动，从顶部开始。

无 盒子没有浮动。

虽然与普通的display: block 不同，设置float 决定了它自己的宽度行为，它覆盖display 属性：如果没有明确指定宽度，浮动元素将占用它需要的宽度，而不是自动占据 100% 宽度的标准块元素行为。