How to cleverly use CSS clear: both to clear floats (with code)

When laying out the page, float is often used, and the float will inevitably be cleared. This article will tell you how to skillfully use clear:both to clear the float. Friends in need can refer to it. ,Hope it helps you!

When we use div css or xhtml css in making web pages, we will encounter some very strange situations. The layout is obviously correct, but the whole picture is confused. Sometimes it looks normal under IE6. When I look at it under IE7 or Firefox, it's a mess. No matter how I calculate it, I just can't correct the layout. In fact, all this is caused by floating, which is float in CSS. To solve the problem, you need to use clear: both.

The CSS manual explains this: The value of this property indicates the side on which floating objects are not allowed. This attribute is used to control the physical position of the float attribute in the document stream.

When the attribute is set to float (float), its physical location is already out of the document flow, but most of the time we hope that the document flow can recognize float (float), or we hope that float (float) The following elements are not affected by float. At this time, we need to use clear: both; to clear.

Program code:

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

If there is no need to clear the float, then the text in the 3rd column will be together with the text in the 1st and 2nd columns, so we add a clear float in the 3rd column clear:both;

Usually, we tend to define a separate CSS style for "clear float", such as:

Program code

.clear {
clear: both;
}

Then use 1bfe0498b90cca37754770ffe84d5e6816b28748ea4df4d9c2150843fecfba68 to specifically "clear floats".
However, some people disagree that you don’t need to write 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68 and just clear it directly in the lower layer.
For example, the originally good

program code

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

must be transformed into

program code

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

From this point of view, < ;div class="clear">16b28748ea4df4d9c2150843fecfba68There is really no need to write.
But obviously, we still have a very common situation when designing web pages:

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">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p style="clear:both;">第三段内容</p>

The page test results exactly as expected under IE: blue There are two color blocks, red and yellow, inside the color block, and below the blue block is a third piece of text.

But the effect of FF is not like this. We can't just clear the next layer to complete our work, we must "clear" it in time before the label where the floating element is located 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">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

For the added 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68 tags will cause the height of IE and FF to change, the solution is as follows:

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">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

The above is the detailed content of How to cleverly use CSS clear: both to clear floats (with code). For more information, please follow other related articles on the PHP Chinese website!