Clearing a float container without source markup

Popularity Report

Total Popularity Score: 0

Rank

URL Tag Cloud

Groups (0)

Related Lists

Bookmark History

Saved by 100 people (-48 private), first by anonymouse user on 2006-04-16

Sharonmcgimsey on 2009-12-17 - Tags float , css , Bulletproof link , clearing floats
Riotpixel on 2009-12-15 - Tags clearfix , CSS
Moshisuper on 2009-09-04 - Tags clearfix , float , css
Enkerli on 2009-08-12 - Tags no_tag
Muzikman on 2009-06-19 - Tags css , webdev , float

Public Comment

Public Sticky notes

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. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element has a stated dimension, and in any case it's a W3C spec violation. This illegal behavior can also be 'toggled' on and off by links within the container, if 'hovering' alters the link background or several other properties. Quite a mess.

Highlighted by aetles

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */

Highlighted by mcfarnell

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

Highlighted by whittam