Common CSS cleanup Methods _ Experience Sharing

Use div + css (for example, I don't like it, but what is it ?) There is not much to say about the advantages of the layout. If float is often used, it is necessary to clear the float, it is also considered to be one of the good habits of writing CSS to clear the floating of parent-level elements at any time. There are three common methods to clear floating.
The Floating source code is not cleared, and the light yellow background of the parent element cannot be viewed in the running code.

<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> <p id = "layout"> <p id = "left"> Left </p> <p id = "right"> Right </p> </p>
[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 a method for a long time. An empty tag can be a p tag or a P tag. I used to use

It is short enough, and many people 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.

<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> <p id = "layout"> <p id = "left"> Left </p> <p id = "right"> Right </p> <p class = "clr"> </p>
[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.

<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> <p id = "layout"> <p id = "left"> Left </p> <p id = "right"> Right </p> </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.

<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> <p id = "layout"> <p id = "left"> Left </p> <p id = "right"> Right </p> </p>
[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 and 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.