以下CSS类定义之间的区别是什么?

I was reading a tutorial for making a CSS based horizontal dropline menu and I noticed that the anchor element (<a>) was set with float:left and display:block

我正在阅读一个基于CSS的水平dropline菜单的教程，我注意到锚元素()设置为float:left和display:block

I wonder what does this do? Because, when you add display:block to an inline element, you can notice the difference, but when you add float:left back again, it's almost like not adding anything else.Only a small spaces between two consequtive inline elements vanishes with float:left.

我想知道这有什么用?因为，当您向内联元素添加display:block时，您可以注意到它们的区别，但是当您再次添加float:left back时，几乎就像不添加任何其他内容一样。只有两个后续的内联元素之间的小空格在float:left时消失。

So basically what I want to know is, what is the difference between the following classes, when a few anchor elements are placed consequently one after the other:

所以基本上我想知道的是，下面这些类的区别是什么，当一些锚元素被放置在一个接一个之后:

a.one {
    display:block;
    float:left; 
}​

a.two {
    float:left; 
}​

a.default { 
}

1 个解决方案

#1

Elements that are floated automatically behave like block elements (see W3C definition) in terms of the box model (i.e. width, height, margins). So, rules 1 and 2 are equivalent. Floating something and specifying display is redundant in most cases (or misleading in this case).

浮动的元素根据框模型自动表现为块元素(参见W3C定义)(即宽度、高度、边距)。所以，规则1和规则2是等价的。浮动和指定显示在大多数情况下是多余的(或者在这种情况下会产生误导)。

Rule 3 differs because the a element is inline by default.

规则3有所不同，因为元素默认是内联的。