应用 float 时的 css 显示属性

Question

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

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 在元素上(尽管有特殊性，见下文)，所以你的三个例子之间没有区别:

left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

right Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.

none The box is not floated.

与普通的 display: block 不同的是，设置 float 决定了它自己关于覆盖 display 属性的行为:如果没有宽度被显式指定， float 元素将占据它需要的宽度，这与自动占据 100% 宽度的标准 block 元素行为相反。