(转)CSS clearfix

原文地址如下：

http://www.webtoolkit.info/css-clearfix.html

Seealso:

http://www.codecto.com/2011/02/css-clearfix-float/

CSSclearfix

Theproblemhappenswhenafloatedelementiswithinacontainerbox,thatelementdoesnotautomaticallyforcethecontainer’sheightadjusttothefloatedelement.Whenanelementisfloated,itsparentnolongercontainsitbecausethefloatisremovedfromtheflow.Youcanuse2methodstofixit:

{clear:both;}

clearfix

Onceyouunderstandwhatishappening,usethemethodbelowto“clearfix”it.

DEMO

Sourcecodeforwebtoolkit.clearfix.css

.clearfix:after{

content:".";

display:block;

clear:both;

visibility:hidden;

line-height:0;

height:0;

}

.clearfix{

display:inline-block;

}

html[xmlns].clearfix{

display:block;

}

*html.clearfix{

height:1%;

}

--------------------------------------------------------

以下是另外一种clearfix的写法，来处jQueryUI:

.clearfix:before,.clearfix:after{content:"";display:table;}

.clearfix:after{clear:both;}

.clearfix{zoom:1;}