LAYOUTS - CSS: Professional Techniques for Modern Layout - page 116

h e CSS used will make sure the br element sits below the two l oated columns. It may also
insert a “blank line” in older browsers, so if you're going to use this method, test it out i rst. If
you do see a blank line, try altering your CSS like so:

.clearfix { display : block ; clear : both ;
font-size : 0 ; height : 0 ;}

Some people have also used an hr instead of a br on the theory that the clearing is a separa-
tor in the document and they'd like to have it visible in non-CSS browsers. However, that will
dei nitely create a gap in CSS-aware browsers, since the hr takes up layout space. You might
think you could prevent that with display: none , but if you do that, the hr won't af ect
layout and so won't clear below the l oats! So instead the space is most ot en closed up with
some margin trickery:

hr.clearfix { display : block ; clear : left ;
font-size : 0 ; height : 0 ;
visibility : hidden ;
margin : -0.66em 0 ;}

h e result is basically the same as before, though you should certainly test it just to be sure.
And if you want exact-to-the-pixel placement of elements, this particular variant isn't your
best bet. You'd be better of with the br .

h ere is a related method that relies on generated content, but recent browsers have made its
use dii cult thanks to changes in the handling of generated content, and it's also been largely
supplanted by previously discussed tips on l oat containment. If your sense of historical
curiosity has been piqued, see http://positioniseverything.net/easy
clearing.html (but note the note at the top).

118

ADJACENT CLEARING
Similar to the preceding tip, this is a way to clear an element that immediately follows another,
as long as the element to be cleared has the same parent as the l oated element(s).

Consider this markup:

< div class="column one">...< / div>
< div class="column two">...< / div>
< div class="column three">...< / div>
< p>...< / p>

You'll note that there's no element between the last column div and the paragraph. So how
do we clear the paragraph below the two columns (see Figure 4-12)? Simple:

div.three + p { clear : both ;}