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 < div class="clear">
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">
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
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
