Comprehensive floating cleaning

Clear a theme that anyone who makes a page will encounter, but do you know clearly and fully understand? So I immediately wrote this article when I was idle.ArticleI can't cover everything, but I can basically give everything I know.

Let's take a rough look at the total number of methods to clear the floating (in IE, Zoom: 1 will not be written, and then write the next topic ). Corresponding demo

1. Use of pseudo-classes: After is used to clear the pseudo-class layer with Zero height in the subsequent null format
2. Use CSS overflow: auto to increase
3. Use CSS overflow: hidden to generate weird adaptation
4. Use display: Table to convert objects into tables
5. The DIV label and the clear attribute of CSS are used.
6. Use the BR label and the clear attribute of CSS.
7. Use the BR tag and the clear attribute of its own HTML

In a rough view, they can solve the problem. However, they have their own advantages and disadvantages on the other hand. (One-to-one correspondence)

2. AdvantagesThe structure semantics is completely correct and will not cause any other weird problems.
   DisadvantagesImproper reuse is proneCodeThe volume increases dramatically.
   SuggestionsThe outermost layer is used for light floating, or clear modular reuse.
4. AdvantagesThe structure semantics is completely correct, and the amount of code is very small.
   DisadvantagesAfter multiple nesting, clicking the light floating box on the outermost layer will be selected as the outermost layer to the innermost layer (ff ); or when the width of Mouseover is changed, the outermost layer module has a scroll bar (IE ).
   SuggestionsUsed by internal modules,Do not nest.
6. AdvantagesThe structure semantics is completely correct, and the amount of code is very small.
   DisadvantagesWhen the content increases, it is easy to avoid line breaks and the content is hidden.
   SuggestionsIf the width is fixed,Do not nest.
8. AdvantagesThe structure semantics is completely correct, and the amount of code is very small.
   DisadvantagesThe attributes of the box model have changed. As you can imagine, there are naturally more singular events than you can count.
   SuggestionsIf you don't want to change the bug to death, you 'd better not use it. However, it can be used as a temporary test in Alpha.
10. AdvantagesThe Code volume is very small, and the reusability is extremely high.
    DisadvantagesIt cannot perfectly adapt to semantics, which is not conducive to revision and demand change.
    SuggestionsFor beginners, you can quickly solve floating problems.
12. AdvantagesThe degree of semantics is better than that in 5th cases; the amount of code is very small, and the reusability is extremely high.
    DisadvantagesThe semantics is still not perfect, which is not conducive to revision and demand change.
    SuggestionsFor beginners, you can quickly solve floating problems.
14. AdvantagesThe degree of semantics is better than that in 5th and 6 cases; the Code volume is the least, and the reusability is extremely high.
    DisadvantagesThe semantics is still not perfect, which is not conducive to revision and demand change.
    SuggestionsIt is better to guide beginners to think about how to use classname to control their performance than to directly use HTML attributes to control the performance of webpages that return to the era of web1.0, after all, the latter has less code.