The Essential Guide to CSS and HTML Web Design

Prev | Current Page 374 | Next

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"

clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
The magic of this method is in the CSS rule. By using the :after pseudo-selector,
content is added after the element the class is applied to (in this case, a period is
added after the wrapper div), and said content is set to clear the element, have no
height, and be rendered as invisible. The genius of the method is that you need no
extra markup to clear floats.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
292
3. Use an alternate method. The clearFix method is great for when you have content
following a containing wrapper. In some cases, you may not have this, though. For
example, place your subsequent content within the wrapper div, as shown:

Subsequent content...

The clearFix method won??™t work here, because the content is now inside the div
that has the clearFix rule applied to it. Various options are open; the first is to
wrap the floated elements in an internal wrapper and apply the clearFix class to
that. In many cases, this will be fine, but you can end up with a case of divitis,
where many nested divs impair the clean nature of the markup. An alternate
option is to apply clearing directly to the element that follows the last piece of
floated content. In HTML, this would look as follows:

In CSS, this is styled as follows:
.clearFloats {
clear: both;
}
Generally, the clearFix method is considered superior to adding styles to specific
elements, but on occasions when it doesn??™t work for your design, it??™s good to have
a fallback, so be mindful of both clearing methods when working on your designs.

Pages:
362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386

Your Electronic Books

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"