There are three commonly used methods of clearing floating in the following ways.
This is not clear floating source code, the run code can not see the parent element light yellow background.
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
1, use empty label to clear float. I used a long way, the empty tag can be a div tag, or it can be a P tag. I used to use <P>, short enough, and a lot of people with <HR>, just need to clear the border for it, but in theory it could be any label. This is done by adding such a label when you need to clear all floating elements inside a floating parent element to clearly float and define CSS code for it: Clear:both. The disadvantage of this method is that it increases meaningless structural elements.
<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" ></p> </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
2, the use of overflow properties. This approach effectively solves the drawbacks of having to increase unintentional code by clearing the float with empty tag elements. Using this method is simply to define the CSS attribute in the element that needs to be cleared for floating: Overflow:auto! "Zoom:1" is used for compatible IE6.
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
3, use after pseudo object clearly floating. This method applies only to non-ie browsers. You can refer to the following examples in the specific wording. The following points need to be noted in use. One, the method must set height:0 in a pseudo object that needs to clear the floating element, otherwise the element will be a few pixels higher than the actual number; The content attribute is required, but its value can be null, and the value of the Content property is set to "." When the method is discussed by the blue ideal. But I find it is also possible to be empty.
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
these three methods have some drawbacks, the use should be selected, compared with the second method is preferable. The above methods, not original, are derived from the network, in this small collation, the original author reserves all rights.
