HTML and CSS Reference
In-Depth Information
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
This code tells the user agent or browser, “For any element that has a class of
clearfix
, add
a period after that content; make it a block-level element but then hide it from view by chang-
ing the
height
and
visibility
. Oh, and also make it so that this new part of the page clears the
floats while you're at it.”
We're creating an element, making it perform the clear, and hiding it all in one shot.
There's only one problem: this technique doesn't work in IE 6 or earlier. However, we can com-
bine this with another piece of CSS (it uses a hack, so refer to Chapter 6 if you've missed the
section on hacks):
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
This code sorts it out for IE/Win; when you apply a
height
attribute to a container element—
1%
in this example—IE automatically clears, thus wrapping the container around the floated
items. So, some browsers get the generated content fix, and others get the auto-clearing fix. All
you need to do is apply the class
clearfix
to any element that you don't want to collapse when
it contains floated elements:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Easy Clearing method demonstrated</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
border:5px solid purple;
padding:10px;
}
.floatleft {
border:5px solid red;
float:left;
width:200px;
background:white;
}
.floatright {
border:5px solid green;
float:right;
width:200px;
background:white;
