Unless you really want to use Block Formatting Context, it’s usually a good idea to clear the float.

Look at the following html code:

1
2
3
4
5
6
7
8
<ul class="list">
    <li>
        One
    </li>
    <li>
        Two
    </li>
</ul>

And the corresponding css code:

1
2
3
4
5
6
ul.list{
    background-color:#369;
}
ul.list li{
    float:left;
}

The background-color style of the ul.list won’t work at all. Because the height of ul.list is 0. Just add a “clear” div will fix this tricky. Here is the right html code:

1
2
3
4
5
6
7
8
9
10
<ul class="list">
    <li>
        One
    </li>
    <li>
        Two
    </li>
    <div class="clear">
    </div>
</ul>

And add the following code to the css file:

1
2
3
.clear{
    clear:both;
}