Clear floating is something that everyone who makes pages will encounter, but can everyone know it clearly and understand it comprehensively? So I wrote an article like this as soon as I had some free time. I can't cover everything, but I can basically teach everyone what I know.
Let's take a rough look at how many methods there are to clear floats (I won't write about using zoom:1 in IE, but I will write about it in the next topic). Corresponding DEMO
- Use the pseudo-class:after to clear the pseudo-class layer with a height of zero for subsequent empty control.
- Use CSS overflow:auto to support height
- Using CSS overflow:hidden to produce weird adaptations
- Use display:table to turn the object into table form
- Use the div tag and the clear attribute of css
- Use the br tag and the clear attribute of css
- Use the br tag and its own HTML clear attribute
At a rough glance, they can both solve the problem; however, they have their own pros and cons. (one-to-one correspondence)
- The advantage structure semantics is completely correct and no other weird problems will arise.
Disadvantages Improper reuse methods can easily lead to a sharp increase in code volume.
It is recommended to use it when the outermost layer is lightly floating, or for people who understand the modular reuse method. - Advantages : The structure semantics are completely correct and the amount of code is very small.
Disadvantages : After multiple nestings, clicking on the outermost light floating box will cause all the content from the outermost layer to the innermost layer to be selected (FF); or when the mouseover causes the width to change, the outermost module will have a scroll bar (IE ).
It is recommended to use the module within one, do not nest it. - Advantages : The structure semantics are completely correct and the amount of code is very small.
Disadvantages: When the content increases, it is easy to automatically wrap lines and the content is hidden.
It is recommended to use when the width is fixed and do not nest. - Advantages : The structure semantics are completely correct and the amount of code is very small.
The properties of the shortcomings box model have changed. It is conceivable that there are more strange events than you can count.
It is recommended that if you don’t want to fix the bug and kill you, it is best not to use it; however, it can be used as a temporary deception in the alpha version for testing. - Advantages: The amount of code is very small and the reusability is extremely high.
The disadvantage is that it cannot perfectly adapt to semantics and is not conducive to revisions and demand changes.
Recommended for beginners, it allows you to quickly solve floating problems. - Advantages: The degree of semantics is better than that of the fifth case; the amount of code is very small and the reusability is extremely high.
Disadvantages: The semantics are still not perfect, which is not conducive to revisions and demand changes.
Recommended for beginners, it allows you to quickly solve floating problems. - Advantages: The degree of semantics is better than that of cases 5 and 6; the amount of code is minimal and the reusability is extremely high.
Disadvantages: The semantics are still not perfect, which is not conducive to revisions and demand changes.
It is recommended to guide beginners to use it when upgrading their thinking, so that they understand that instead of using classname to control a performance, it is better to return to the WEB1.0 era of web pages and directly use html attributes to control performance. After all, the latter has less code.
Finally, the list is complete. However, I think it is necessary to apologize to everyone about the article I reprinted on Ghost; I regret very much that I changed the title of Ghost from "easiest" to "optimal", which later misled many students. So I re-wrote an article to share with you.
Original text: http://webteam.tencent.com/?p=1122
