Xhtml + css layout, clear floating sorting and summary

Clear a theme that anyone who makes a page will encounter, but do you know clearly and fully understand? As a result, I immediately wrote such an article, which could not cover all aspects. However, I was able to teach everything I knew.

 

Let's take a rough look at the total number of methods to clear the floating. Corresponding DEMO

1. Use a pseudo-class: after to clear the pseudo-class layer with Zero height in the subsequent blank System
AdvantagesThe structure semantics is completely correct and will not cause any other weird problems.

DisadvantagesImproper reuse may cause a sharp increase in the amount of code.

SuggestionsThe outermost layer is used for light floating, or clear modular reuse.

 

2. Use CSS overflow: auto to raise the bar
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 ).

SuggestionsInternal modules are used. Do not nest them.

 

3. Use CSS overflow: Den den to generate weird adaptation
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.

SuggestionsUse it when the width is fixed. Do not nest it.

 

4. Use display: table to convert objects into tables.
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. Use the div tag and the clear attribute of css.
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. Use the br label and the clear attribute of css.
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. Use the br tag and the clear attribute of its own HTML
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.