Clearing a float container without source markup. (This clearing technique was developed by Tony Aslett, of csscreator.com.
The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller.
This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. <div><! CSS Float Theory: Things You Should Know. CSS - Clearing floats. Page last changed today A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats.
If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way. Let's try it. This is the CSS we'll use throughout the page: Now this happens: The left column. The right column. We want the black border to go around both our floating columns. The old solution to this problem required you to add an extra element with clear: both to the container. Clearer div with clear: both This can be done either by adding the extra element in the HTML source code (as the example above does) or by using the :after pseudo-class to generate it.
In any case, adding an HTML element for presentation's sake is something we've learned to avoid. The width is necessary to trigger "hasLayout" in Explorer Windows (except for 7). A few points merit extra attention: Acidic float test suite: undesired float enclosing caused by has. In IE, floats are auto-contained by elements that have “layout.” Sometimes, this auto-containing might be not desired. The following tests show a floating logo that should stick out of its parent header, a DIV. Subsequent boxes should respect this float. Important: This preliminary information on the IE7 beta 2 preview is subject to change! A specified height for a container will be respected since IE7b2, meaning that this layout trigger stops the extend-to-fit, or auto-containing behavior of previous IE versions. In standards mode IE6, we can force the #header to respect a given height with overflow: hidden, and we can prevent the logo from being cut off with position: relative (using another bug in IE, as hidden should mean hidden).
The painful reality is that this logo is not only taken out of the flow as floats are, but it is also not respected by subsequent elements, be they floats, or clearing elements, or whatever (see test E). Created, and last updated: Feb. 13th, 2006.