CSS: Floating Elements

I was just looking at the CSS 2.1 spec and I remembered something about floated elements. When you float an element, the element is made a block element.

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

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.

What this means is if you have an inline element like a link and you float it, you can give the element properites the same as you would a block element. You won’t have to explicity declare a display of block to give an element width, height, margins, etc.

Example: This block of code

a.btn {
display:block;
float:left;
width:100px;
height:50px;
margin:-top:10px;
}

Achieves the same effect same as this block:

a.btn {
float:left;
width:100px;
height:50px;
margin-top:10px;
}

The float rule is why using display:inline fixes the double float margin bug in IE6. Even though in the css you put display:inline to remove the double margin, IE6 still makes the element a block element since it is floated.

This is a good step towards making your CSS as optimized as possible. It might seem really small not having to use one line, but think of how many times you make a link a block element so you that you can use a background image instead of text.