Clear floating clear: both application details

In CSS, we often use Clear floating clear, which is typically Clear: both;

In the CSS Manual, the value of this attribute specifies that the edge of a floating object is not allowed. This attribute is used to control the physical location of the float attribute in the document stream.

When float is set for the attribute, the physical location of the object is already out of the document flow. However, most of the time we want the document flow to recognize float or float) the following elements are not affected by float. In this case, clear: both; is required.

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

[Ctrl + A Select All for copy prompt: you can modify some code before clicking run]

If you do not need to clear the floating, the text in the 3rd column will be included with the text in the 1st and 2 columns, so we add a clear floating clear: both in the 3rd columns;

<P style = "float: left; width: 200px;"> This is the 1st 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 Select All for copy prompt: you can modify some code before clicking run]

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

Generally, we define a CSS style separately by "clear float", such:

. Clear {
Clear: both;
}

 

Then, use <div class = "clear"> </div> to specifically "clear floating ".

However, I also disagree with the opinion that <div class = "clear"> </div> can be left empty and cleared directly at the lower layer.

For example

<P style = "float: left; width: 200px;"> This is the 1st 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 integrated

<P style = "float: left; width: 200px;"> This is the 1st 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>

 

In this case, <div class = "clear"> </div> does not need to be written.

However, it is clear that we still have a common situation in Webpage design:
<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"> content of the first part of the content </div>
<Div id = "container"> content of the second part of the content of the second part </div>
</Div>
<P style = "clear: both;"> content in the third section </p>
 
[Ctrl + A Select All for copy prompt: you can modify some code before clicking run]

This page is used to test the effect under IE: the blue block contains two color blocks, red and yellow, and the third text is below the blue block.

However, this is not the case with FF. We cannot simply clear the next layer to complete our work. We must clear the label of the floating element in time ".

<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"> content of the first part of the content </div>
<Div id = "container"> content of the second part of the content of the second part </div>
<Div class = "clear"> </div>
</Div>
<P> content in the third section </p>
 

[Ctrl + A Select All for copy prompt: you can modify some code before clicking run]

For the <div class = "clear"> </div> label that is added, the height of IE and FF changes. The solution is as follows:

. Clear {
Clear: both;
Height: 1px;
Margin-top:-1px;
Overflow: hidden;
}

 

<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"> content of the first part of the content </div>
<Div id = "container"> content of the second part of the content of the second part </div>
<Div class = "clear"> </div>
</Div>
<P> content in the third section </p>