This article is mainly on how to use clearfix in HTML and clear, for those just beginning to understand CSS children's shoes. About clearfix and clear style I will not write here.

here are about usage of the two class, first let's look at an example:

code is as follows:


<! DOCTYPE HTML>
<HTML lang="en - US" >
<Head>
<Meta charset="utf-8"/>
<Title> How to use clearfix in HTML and clear
<Link rel="stylesheet" type="text/CSS" href="http://www.script-home.com/css/base.css" media="all"/>
<Style type="text/CSS" >
. Fl {float: left; }
demo {background: #CCC; }
item1 {background: #f90; Height: 100px; Width: 100px; }
item2 {background: #fc0; Height: 200px; Width: 100px; }
</style>
</head>
<Body>
<Div class="demo" >
<Div class="fl item1 >" </div>
<Div class="fl item2 >" </div>
</div>
</body>
</html>

we all know that the float will produce many unknown problems, through the example above we can find that class=" Demo" Height is not the div inside to open, this is because the div inside floating and out of the document, because the demo itself is not high, so we can't see the gray background. Of course just to demo a highly, but it's out of the purpose of this article (and sometimes we hope that the height of the outer div determined by the content inside).

now that is the problem of floating, then just remove the floating, believe that the best there are a lot of clean up floating method, such as overflow: hidden. Below I will introduce with clearfix and clear to clear the float.

code is as follows:


<! DOCTYPE HTML>
<HTML lang="en - US" >
<Head>
<Meta charset="utf-8"/>
<Title> How to use clearfix in HTML and clear
<Link rel="stylesheet" type="text/CSS" href="http://www.script-home.com/css/base.css" media="all"/>
<Style type="text/CSS" >
. Fl {float: left; }
demo {background: #CCC; }
item1 {background: #f90; Height: 100px; Width: 100px; }
item2 {background: #fc0; Height: 200px; Width: 100px; }
</style>
</head>
<Body>
<The h2 >With the clear clear floating </h2 >
<Div class="demo" >
<Div class="fl item1 >" </div>
<Div class="fl item2 >" </div>
<Div class="clear" ></div>
</div>
<The h2 >Removed with clearfix floating </h2 >
<Div class="clearfix demo" >
<Div class="fl item1 >" </div>
<Div class="fl item2 >" </div>
</div>
</body>
</html>

we found that clearfix is mainly used in the floating layer's father, and the clear is mainly used between floating and floating layer, and the floating layer with level, if you want to open the parent layer height, the clear will last.

it is difficult to explain these two methods which is better, can only say that specific needs specific treatment.

maybe someone will ask, clearfix style so why write clear float? These styles are what's the point? This requires a favorite of CSS pseudo-classes have certain understanding


This concludes the body part