Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 62

When loat is used, the elements that follow move up to fill any available space—similar to what
happens in a text editor when you remove a carriage return. The loat property breaks the usual
meaning of block and inline. At some point, though, you need to restore things to the natural order
and stop floating. The element where floating stops must be styled as below:
#stopFloating {
clear: both;
}
The float stopper element can be a true element of the page (that is, a paragraph of text) or an
empty DIV element only used to stop floating.
Note If you're still a bit confused about the differences between inline and floating,
consider that inline is all about having individual elements laid out side by side on the
same logical line. Floating, however, is about wrapping elements between a starting and an
ending point.
Inline-block elements
Floated elements work well, but they also have some drawbacks when they span over multiple lines
and each element is of a different size. When you face this problem, then the third possible value of
the display property comes to the rescue: the inline-block value.
An inline-block element is a block element rendered inline with other block elements. Internally,
each block element will render as usual with all block, inline, and floating settings it needs. Consider
the following HTML snippet:
<ul id="container">
<li>Block #1</li>
<li>Block #2</li>
<li>Block #3</li>
</ul>
Now style the elements as follows. The results are shown in Figure 3-5.
li {
display: inline-block;
width: 100px;
min-height: 100px;
background-color: green;
color: white;
vertical-align: top;
}