CSS Clear:both Clear float float

The float property of CSS is to change the default display of block element objects: After the HTML tag has the Float property set, it will no longer occupy a single row, allowing multiple elements to be in the same row, so you need to clear the float after the style definition By specifying the value of the CSS property float, the element floats to the left or right, and then moves up by the successor element to fill the free space vacated by the previous element's float. The float property of the CSS is to change the default display of the block element object, and after the HTML tag sets the Float property, it will no longer occupy a single row, allowing the effect of multiple elements to be in the same row.

Clear:both Clear Float

Clear clears the float mainly by borrowing the clear property to clear the float, which is a relatively stale method of clearing the float, but it feels like this is the usual way to clear the float. Using Clear:both to clear the float, we need to add an extra element immediately after the need to clear the floating place, such as a div tag, and define their style as "Clear:both", which is typically used in the following way:

The code is as follows:
<div class= "Demo A" >
<div class= "demob demofloat" >float left</div>
<div class= "Democ demofloat" >float right</div>
<div class= "Demod demofloat" >not float</div>
<div class= "Clear" ></div>
</div> =============================================================== When a property is set to float (float), its physical location is out of the document flow, But most of the time we want the flow of the document to recognize float (float), or if the element behind float (float) is not affected by float (float), then we need to use Clear:both to clear it.

Program code:

<p style= "float:left;width:200px;" > This is 1th column,</p>
<p style= "float:left;width:400px;" > This is 2nd column,</p>
<p> This is the 3rd column. </p>

If you do not need to clear the float, then the 3rd column of text will be with the 1th, 2 columns of text together, so we in the 3rd column plus a clear floating clear:both;

Screenshots are as follows:

==========================================================
In general, we tend to define a CSS style for "clear float" individually, such as: program code
. Clear {
Clear:both;
}

Then use <div class= "clear" ></div> to specifically "clean float".
However, there is an unfavorable opinion is that <div class= "clear" ></div> can not write, directly on the lower level to clear on it.
Like a good program code.
<p style= "float:left;width:200px;" > This is 1th column,</p>
<p style= "float:left;width:400px;" > This is 2nd column,</p>
<p style= "Clear:both;" > This is the 3rd column. </p> Program code
<p style= "float:left;width:200px;" > This is 1th column,</p>
<p style= "float:left;width:400px;" > This is 2nd column,</p>
<div class= "Clear" ></div>
<p> This is the 3rd column. </p>

In this view, <div class= "clear" ></div> does not need to write.
But obviously, we have a very common situation in Web design: program code
<style type= "Text/css" >
#main {background-color: #3399CC; width:600px;padding:20px;}
#sidebar {background-color: #FF6600; float:left;width:130px;}
#container {float:right;width:420px;background-color: #FFFF33;}
</style>
<div id= "Main" >
<div id= "sidebar" > First paragraph content first paragraph content </div>
<div id= "Container" > second paragraph content second paragraph content </div>
</div>
<p style= "Clear:both;" > Third paragraph content </p>

This page tests the effect in IE: the first line has red and yellow two color block content, the second line is the third paragraph of text.

But the effect of FF is not so. We cannot do our work simply by clearing the next layer, we must "clear" the floating element before it is closed. Program code
<style type= "Text/css" >
#main {background-color: #3399CC; width:600px;padding:20px;}
#sidebar {background-color: #FF6600; float:left;width:130px;}
#container {float:right;width:420px;background-color: #FFFF33;}
. clear {Clear:both;}
</style>
<div id= "Main" >
<div id= "sidebar" > First paragraph content first paragraph content </div>
<div id= "Container" > second paragraph content second paragraph content </div>
<div class= "Clear" ></div>
</div>
<p> Third paragraph content </p>

For the additional <div class= "clear" ></div> label will cause changes in IE and ff height, resolved by the following method: program code
Clear {
Clear:both;
height:1px;
margin-top:-1px;
Overflow:hidden;
}

Program code
<style type= "Text/css" >
#main {background-color: #3399CC; width:600px;padding:20px;}
#sidebar {background-color: #FF6600; float:left;width:130px;}
#container {float:right;width:420px;background-color: #FFFF33;}
. clear {Clear:both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id= "Main" >
<div id= "sidebar" > First paragraph content first paragraph content </div>
<div id= "Container" > second paragraph content second paragraph content </div>
<div class= "Clear" ></div>
</div>
<p> Third paragraph content </p>