HTML and CSS Reference
A page with a
<div> floated to
The <div> is moved over to the right side of the page, and the first paragraph appears
next to it. The float: right property indicates that the rest of the page's content should
flow around it. The bottom paragraph does not flow around the <div> because I've
applied the clear: both property to it, which cancels any float that has been set. The
options for float are easy to remember: left , right , and none . The options for clear are
none , left , right , and both .
Using the clear property, you have the option of clearing either the left or right float
without canceling both at the same time. This proves useful if you have a long column
on the right and a short one on the left and you want to maintain the float on the right
even though you're canceling it on the left (or vice versa).
Now let's look at how floated elements work together. Figure 8.14 shows what happens
when you have two right-floating elements together, and Figure 8.15 shows the effect
with a left-floating element and a right-floating element.