ptg16476052The Box Model 1878
As you can see from the style sheet, I’ve set the float property for elements with the
class “right” to right. I’ve also added some padding, a margin, and a border to that class
for aesthetic purposes and set the width for that class to 33% so that it isn’t as wide as the
browser window. I’ve also put the second paragraph on the page in the class bottom, and
I’ve added the clear: both property to it. Figure 8.16 shows the results.
Output ▼
The
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
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 the 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.17 shows what happens
when you have two right-floating elements together, and Figure 8.18 shows the effect
with a left-floating element and a right-floating element.
FIGURE 8.16
A page with a
the right.