应用浮点时的css显示属性 [英] css display property when a float is applied

问题描述

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

  div.foo {
 display： 
 float：left; 
} 
 
 div.foo2 {
 display：inline; 
 float：left; 
} 
 
 div.foo3 {
 display：inline-block; 
 float：left; 
} 
  

EDIT： b

如果根据规范没有差异，那么某些过时版本的浏览器（ahem，IE）会以不同的方式渲染它们吗？

解决方案

如果我阅读了规范正确，并且练习确认这一点，设置 float：left 或 right / code>属性，并强制 display：block （虽然有特殊性，见下文），因此你的三个例子之间没有区别： p>

左
元素生成一个悬浮在左侧的块框。

向右
类似于'left'，除了框浮动在右边，内容从框的左边开始，从顶部开始。

none
此框不悬浮。

与正常 虽然，设置 float 规定了它自己的行为，宽度覆盖 display ：如果没有明确指定宽度，浮动元素将占据所需的宽度，而不是自动占据100％宽度的标准块元素行为。

When an element is floated, how do different display properties affect the layout? Or, what are the differences, if any, between these classes:

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

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

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

EDIT:

If there are no differences according to the spec, then do certain antiquated versions of browsers (ahem, IE) render them differently?

解决方案

If I read the spec correctly, and practice confirms this, setting float: left or right overrides the display property anyway and forces display: block on the element (although with peculiarities, see below), so there will no difference between your three examples:

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.

Differently from normal display: block though, setting float dictates its own behaviour in regards to width that override the display property: if no width was explicitly specified, the floated element will take up as much width as it needs, as opposed to standard block element behaviour of taking up 100% width automatically.

这篇关于应用浮点时的css显示属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！