Summary of common CSS cleanup Methods

There are three common methods to clear floating.
Floating is not cleared. Source code , Run Code The light yellow background of the parent element cannot be viewed.

<textarea id="runcode8837"><Br/> <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> leftright <p></textarea>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

1. Use an empty tag to clear the float. I have been using this method for a long time. An empty tag can be a div tag or a p tag. I am used to using <p>, which is short enough, and many people use <HR>. I just need to clear the border for it, but theoretically it can be any label. This method adds such a label to clear all floating elements inside the floating parent element and defines the CSS code for it: clear: Both. The disadvantage of this method is to add meaningless structural elements.

<textarea id="runcode551"><Br/> <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> leftright <P class = "CLR"> <p></textarea>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

2. Use the overflow attribute. This method effectively solves the drawbacks of adding unintentional code by clearing the floating through the empty Tag Element. To use this method, you only need to define the CSS Attribute Overflow: Auto in the element to be cleared! "ZOOM: 1" for IE6 compatibility.<Br/> <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> leftright <p>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

3. Use the after pseudo object to clearly float. This method is only applicable to non-ie browsers. For more information, see the following example. Pay attention to the following points during use. 1. In this method, height: 0 must be set for the pseudo object to clear the floating element; otherwise, the element will be several pixels higher than the actual one; 2. The content attribute is required, however, the value can be blank. When Blue is ideal, the value of the content attribute is set ". ", but I found it is OK to be empty.

<textarea id="runcode18046"><Br/> <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> leftright <p></textarea>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

these three methods have some drawbacks. They should be preferred when used. In comparison, the second method is more desirable. The above methods are not original and all come from the network. In this case, the original author reserves all rights.