Clear and detailed application of floating Clear:both

In CSS we often use the "clear float", which is typically the Clear:both The

CSS manual explains that the value of this property indicates that an edge of a floating object is not allowed. This property is used to control the physical location of the float property in the document flow.

When the property is set to float (float), its physical location is already out of the document stream, but most of the time we want the document stream to recognize float (float), or to expect the elements behind float (float) to be unaffected by float (float). This time we need to use Clear:both to clear.

For example:
<p style= "float:left;width:200px;" > This is the 1th column,</p> <p style= "float:left;width:400px;" > This is the 2nd column,</p> <p> this is column 3rd. </p>
[Ctrl + a All choose to copy tip: You can modify part of the code, then click Run]

If you don't need to clear the float, then the 3rd text will be with 1th, 2 column text together, So we add a clear floating clear:both in the 3rd column;

<p style= "float:left;width:200px;" > This is the 1th column,</p> <p style= "float:left;width:400px;" > This is the 2nd column,</p> <p style= "Clear:both;" > This is the 3rd column. </p>
[Ctrl + a All choose to copy tip: You can modify part of the code first, then click Run]

=================================== ===========================

Typically, we often define "clear float" individually as a CSS style, such as:

. Clear { Clear:both; }

then uses <div class= "clear" ></div> to specifically "purge floats."





But there is also disagree is that &lt;div class= "clear" &gt;&lt;/div&gt; can not write, directly in the lower level can be cleared.





like a good
.

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

must be
.

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

this view, &lt;div class= "clear" &gt;&lt;/div&gt; do not need to write.





but obviously, we have a very common situation in Web design:


<textarea class="bk" id="temp87190" rows="5"><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;" > section III content </p></textarea>


[Ctrl + a All choose to copy tip: You can modify some of the code, and then click to Run]





this page test in IE under the effect is the same: the Blue block has red and yellow two color block content, while in the blue block below is the third paragraph of text.





but the effect of FF is not like this. We can't do our job just by looking at the next level of cleanup, we have to "clear" the floating element before the label closes.





<textarea class="bk" id="temp26711" rows="5"><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" > the first paragraph of the contents of the first paragraph </div> <div id= "Container" > second paragraph second paragraph content </div> < Div class= "Clear" ></div> </div> <p> Third paragraph content </p></textarea>


[Ctrl + a All choose to copy tip: You can modify some of the code, then click Run]





for additional &lt;div class= "clear" &gt;&lt;/div&gt; tags will cause IE and ff height changes, through the following methods to resolve:

. Clear { Clear:both; height:1px; margin-top:-1px; Overflow:hidden; }

<textarea class="bk" id="temp8148" rows="5"><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;o Verflow:hidden;} </style> <div id= "main" > <div id= "sidebar" > the first paragraph of the first paragraph content </div> <div id= "Container" > Second paragraph content second paragraph content </div> <div class= "clear" ></div> </div> <p> Third paragraph content </p></textarea>