Question

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

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.

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 { 
}

Answer 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).

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