Use the clear property variable is commonplace, mature in the definition of the clear property may also in the chest.
clear, for example: left is clear on the left side of the floating element, the example Code is as follows:

  Code is as follows:  


the View Code
<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Meta name="author" content="http://www.softwhy.com/"/>
<Title> Ant tribe </title>
<Style type="text/CSS" >
first
{
width: 100 px;
height: 100 px;
border: 1 px solid red;
float: left;

}. The second
{
width: 100 px;
height: 100 px;
border: 1 px solid blue;
float: left;

}. The third
{
width: 100 px;
height: 100 px;
border: 1 px solid green;
float: left;
clear: left;
}
</style>
</head>
<Body>
<Div class="first" ></div>
<Div class="second" ></div>
<Div class="third" ></div>
</body>
</html>

can be seen from the above code, the third div is clear: the role of the left property reflected, elements produce a newline. But use the clear property right when not working. Instance
Code is as follows:


  Code is as follows:  


the View Code
<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Meta name="author" content="http://www.softwhy.com/"/>
<Title> Ant tribe </title>
<Style type="text/CSS" >
first
{
width: 100 px;
height: 100 px;
border: 1 px solid red;
float: left;

}. The second
{
width: 100 px;
height: 100 px;
border: 1 px solid blue;
float: left;
clear: right;

}. The third
{
width: 100 px;
height: 100 px;
border: 1 px solid green;
float: left;
}
</style>
</head>
<Body>
<Div class="first" ></div>
<Div class="second" ></div>
<Div class="third" ></div>
</body>
</html>

despite the clear: the second div code above right code, but it's on the right side is a floated element. The main code is executed sequentially, when performing the second div to remove floating right, the third div is not loaded, so its clear effect would be invalid, then the third div will still be followed by a second div.
# 0 - #


This concludes the body part