When using DivCSS web page layout, floats are often used. Many evil things may be caused by floats. There are many introductions to clearing floats in the past. Clearing floats is a must, and clearing floats from parent elements at any time is considered one of the good habits in writing CSS.
Let’s look at today’s tutorial. This is a floating source code that has not been cleared. You cannot see the light yellow background of the parent element when running the code.
Example Source Code
[www.downcodes.com] <style type="text/css">
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
As shown in the figure before clearing the float:
1. Use empty labels to clear floats A method I have used for a long time is that the empty tag can be a div tag or a P tag. I am used to using <P>, which is short enough. Many people also use <hr>, but they just need to clear the border for it, but in theory it can be any tag. This method is to add such a tag to clear float after all floating elements inside the floating parent element need to be cleared, and define the CSS code for it: clear:both. The disadvantage of this approach is the addition of meaningless structural elements.
Example Source Code
[www.downcodes.com] <style type="text/css">
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr">
</div>
This method effectively solves the disadvantage of having to add unintentional code by clearing floats through empty label elements. To use this method, you only need to define the CSS property: overflow:auto in the element that needs to be cleared of floating, and that's it! "zoom:1" is for compatibility with IE6.
Example Source Code
[www.downcodes.com] <style type="text/css">
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
This method only applies to non-IE browsers. Please refer to the following examples for specific writing methods. Please pay attention to the following points during use. 1. In this method, height:0 must be set for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual value; 2. The content attribute is necessary, but its value can be empty, blue ideal discussion In this method, the value of the content attribute is set to ".", but I found that it is also possible to leave it empty.
Example Source Code
[www.downcodes.com] <style type="text/css">
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
As shown in the figure after clear floating:
Each of these three methods has advantages and disadvantages, and you should choose the best when using them. In comparison, the second method is more preferable.
