Comprehensive floating cleaning

Source: Internet
Author: User

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)
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.