What is the difference between the following CSS class definitions?

Question

I read a tutorial for creating a horizontal menu with a CSS-based curve, and I noticed that the anchor element ( <a> ) was set using float: left and display:block

I wonder what that does? Because when you add display:block to an inline element, you may notice a difference, but when you add float:left backwards, it is almost like adding anything else. Only small spaces between two connecting inline elements disappear with float:left .

So basically, what I want to know is the difference between the following classes, when several binding elements are placed sequentially one after another:

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

Answer 1

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

Rule 3 differs in that the default element is a inline .