Web Design in a Nutshell, 3rd Edition

Floating Basics

The float property is not limited to images; it can be applied to any element. In this slightly more ambitious example shown in Figure 21-2, the float property is applied to a selection of text (known in CSS as an “inline non-replaced element”). Note that the dotted lines are a device for pointing out the parts of the element boxes in this figure and would not actually appear in the browser.

    span.note {
        float: right;
        width: 200px;
        margin: 20px;
        background-color: #999;
        font-weight: bold; }

    p {border: solid 2px #666; padding: 30px;}

    <p><span class="note">I'm going to go over here for a little while. Don't
mind me. </span> Lorem ipsum dolor sit amet, consectetuer  . . .

The results reveal some basic behaviors of element floating :

• All floated elements (even inline elements, as shown in the example) take on block behaviors. It is equivalent to setting display: block (although it is not necessary to do so).

  

  Figure 21-2. Floating an inline text element

• When floating a non-replaced (i.e., text) element, it is necessary to specify the width for the element. Not doing so can result in the content area box collapsing to its narrowest possible width.

• The floated element stays within the content area of its containing block (the nearest block-level ancestor element). It does not cross into the padding.

• Margins are maintained on all sides of the floated element. In other words, the entire ...