CSS clear Floating Common methods Summary _ experience Exchange

There are three common ways to clear floats.
This is not clear floating source code, run code can not see the parent element light yellow background.

<textarea id="runcode65734"><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></textarea> left right
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

1. Use an empty label to clear the float. I used a long way, empty tags can be a div tag, or it can be a P tag. I used to use

, short enough, and a lot of people to use, just need to clear the border for it, but in theory can be any label. This is done when you need to clear all the floating elements inside a floating parent element and add such a label to clearly float and define the CSS code for it: Clear:both. The disadvantage of this approach is to add meaningless structural elements.

<textarea id="runcode57448"><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> left right <p class= "CLR" ></p></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

2. Use the overflow property. This method effectively solves the drawback of having to increase the unintentional code by clearing the float with an empty label element. Using this method is simply to define the CSS properties in the element that needs to clear the float: Overflow:auto, you can! "Zoom:1" is used for compatibility with IE6.
<textarea id="runcode35422"><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></textarea> left right
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

3, use after pseudo-object clear floating. This method applies only to non-ie browsers. You can refer to the following example for specific wording. Attention should be paid to the following points in use. The method must be set height:0 in the pseudo-object that needs to clear the floating element, otherwise the element will be higher than the actual number of pixels; second, the content property is required, but its value can be empty, blue ideal when discussing this method, the value of the Content property is set to ".", But I find it also possible to be empty.

<textarea id="runcode74943"><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></textarea> left right
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

All three methods have some drawbacks, the use of the choice should be preferred, the second method is preferable. The above methods, not original, are derived from the network, in this small arrangement, the original author reserves all rights.

