ptg16476052The Box Model 1858
When overflow is hidden, the content that does not fit in the box is not displayed at all.
Both scroll and auto add scrollbars to enable users to view the entire contents of the
box. When the setting is scroll, the scrollbars are always displayed, whereas when the
setting is auto, the scrollbars display only if needed. When overflow is visible, content
that overflows the box is not taken into account when laying out other items on the page,
and the overflow content bleeds onto other content on the page. When you are sizing ele-
ments on the page manually, you should always account for potential overflow so that it
doesn’t break the layout of your page.
Float
Normally , block-level elements flow down the page from top to bottom. If you want to
alter the normal flow of the page, you can use absolute positioning, which I discuss in a
bit, or you can use the float property. The float property is used to indicate that an ele-
ment should be placed as far as possible to the left or right on the page and that any other
content should wrap around it. This is best illustrated with an example. First, take a look
at the page in Figure 8.15.
FIGURE 8.14
Different ways of
dealing with over-
flow.
FIGURE 8.15
A page with no
floating elements.