HTML and CSS Reference
In-Depth Information
This class makes boxes stack up horizontally instead of vertically, which is the
normal behavior for block elements (see Figure 22-2 ).
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Figure 22-2. Floated boxes
A side effect of using floats is that any element that follows these floated boxes also
lines up horizontally. The clear property is designed to stop this behavior.
The clear property is used to clear floating elements from the left, right, or both sides of
an element.
clear (block) : none | left | right | both
This property is commonly given its own class that has the same name as the
.clear { clear: both; }
An empty div container with the clear class is typically placed after the floated
elements. This cleared element is moved below the floating elements instead of
appearing next to them.
<div class="clear"></div>
Because floated layouts tend to be complex and fragile, they have generally been
superseded by other layout methods, such as the use of the positioning properties.
In the box-aligning example given earlier, a better alternative is to change the box to
an inline-block element. This accomplishes the same task, while removing the need to
clear the floated elements.
Search WWH ::

Custom Search