Question

I’am watching some video tutorial about css and find realy strange thing.
First of all we create unordered list with links like elements:

<ul id="menuList">
    <li><a href="google.com">This</a></li>
    <li><a href="demo.org">That</a></li>
    <li><a href="pogoda.ru">Other</a></li>
</ul>

and than apply some styling to create horizontal menu:

#menuList {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menuList a {
    display: block;
    float: left;
}

Thats produce flat menu.
So my question is why is this working? In my opinon float should be applied to li element – container. li is a block level element or I’m wrong???

Some CSS rules makes me crazy.

Answer 1

What’s happening here is not necessarily easy to understand if you’re new to CSS.

Your li elements are block elements, with no floating. Your a elements are inline elements with floating.

The floating of the a tag means it no longer gives any signal to the parent li as to how tall the li should be. In effect, it has been partially lifted out of the vertical stack.

(Side note: this is why it’s important to clear after floats. If you put a clear element (i.e. an element with clear: both applied to it) after each, the effect you currently see would be lost, as the parent li would use that clear as a marker for how tall to make itself.)

This means each li effectively has zero height, giving the effect that each a tag is adjacent to its a tag cousins. This is merely a fluke arising form the li tags having no height.

This can send people new to CSS somewhat round the twist.

Personally I’d say there’s no need in your case to float the a tag rather than the li (which is what I suggest you do), and would consider it a questionable tutorial for that reason.