As one of the three three major layout mechanisms — in addition to absolute and relative positioning — floated elements are not uncommon these days. However, the occasional browser weirdness can contribute to float’s already-tricky nature. In particular, IE has the bizarre habit of doubling margins on a floated element if that margin is in the same direction as the floating (such as margin-left on a float:left element). Fortunately, there’s a solution.
To give an example, say you had an element which had a 10em left margin that was also floated left. Modern browsers would correctly display a 10em left margin but IE would come up with 20em somehow. (As an aside, IE’s antics sometimes remind me of the kind of ignorance displayed on SNL’s reoccurring Celebrity Jeopardy sketch.) Getting back to CSS, Steve Clason discovered a fix and, as Big John put it in his summary of the fix, it’s a “classic type of IE bug fix, using one property to cure a bug that affects an unrelated property.”
According to the spec, floated elements are automatically set to display:block (regardless of any specified display setting). So, not only is it unnecessary to force a display property on floated elements, it would be redundant to do so (and you may already see where this is going). And, the fix to IE’s doubled margins is to set those floated elements to display:inline. Once again, I defer to Big John for analysis: “Why is this happening? Don’t ask such silly questions! This is IE, remember?”
And, because standards compliant browsers simply ignore the display property on floated elements, you can safely set all floated elements to display:inline without consequence (or, at least the ones with margins matching their floating direction). And, even if some goofiness were to arise, you could always target IE alone with the ever-reliable star-HTML hack.