Geek asks and answers

"The best clearfix ever?"

I saw this pretty excellent method for clearfix: http://www.marcwatts.com.au/blog/best-clearfix-ever/

It is suggested that you add the following CSS code that automates clearfix and does not require you to add a "clearfix" or similar class to the elements you want to clear.

/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }

Are there any flaws in this method? Could this result in clearfix'ing elements that you might not want clearfix'ed to do? Or such rules that it will take into account any situation?

+3
source share
5 answers

I think this is a bad idea. You really will trust someone who, it would seem, forgot to do this:

article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

, .

, sledge-hammered .

, - , .

, @Guffa.

IE7: http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1 hasLayout. hasLayout , . :

. , - , .

overflow: hidden float. , clearfix.

clearfix http://html5boilerplate.com/:

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}
+24

clearfix'ing , clearfix'ed?

. , div .

+4
Are there any disadvantages to this method?

, < IE8, "" . CSS

+2

Cascade Framework, clearfix :

div:after {
    content: "";
    display: table;
}

div:after {
    clear: both;
}

div {
    *zoom: 1;
}

- , JS-... "unclearfixing" .

, , . , , , , , , .

, , , display: relative display: absolute . - , .

+1

div , . 95% , divs, clearfix . , , , clearfix div. CSS, :

div:after {
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
    font-size: 0;
    line-height: 0;
    content: ' ';
    visibility: hidden;
    overflow: hidden;
    }
div {
    *zoom: 1;
    }
0
source

More articles:


All Articles