1 reply [Last post]
dragonfly's picture
Last seen: 7 years 21 weeks ago
Timezone: GMT+1
Joined: 2013-02-03
Posts: 2
Points: 4


i'm using Clearfix method to clear floated elements. And on one of the pages I realized that my layout got slightly broken. I've managed to reproduce the issue here:


Could you explain why when I apply clearfix class I see a margin between container and footer, whereas old clear:both does not cause this issue? Also, is it possible to use clearfix and get rid of this margin?


gary.turner's picture
Last seen: 12 hours 4 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

* { margin: 0px; padding: 0;

* { margin: 0px; padding: 0; } /*a really bad idea*/
.floated { float: left; width: 25%; }
.footer { background: green; clear: both; } /*the clear property is redundant*/
.container {
    border: 1px solid black; background: yellow; width: 100%;
/* Clearfix CSS */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0; /*should be {font-size: 0;} the default 
                     font-size will create a 16px gap with 
                     0 line-height, or 19px  gap with the 
                     default line-height*/    
/* from here
.clearfix {
	display: inline-block;
html[xmlns] .clearfix {
	display: block;
* html .clearfix {
	height: 1%;
to here is for obsolete browsers that are beyond redemption. 
The use of the attribute selector means that non-xhtml docs 
and older browsers will not respond, leaving the display at 
inline-block which will cause a small gap.

Further, improvements in our understanding of IE's old hasLayout and the modern block formatting context have pretty much left Tony's brilliant clearfix hack unnecessary. See Enclosing float elements for more options.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.