Clear a floating thing that anyone who makes a page will encounter, but can everyone know clearly and comprehensively? So when I was free, I immediately wrote such an article. I couldn't cover everything, but I could basically teach everything I knew.
Let’s take a rough look at how many ways to clear the float (I won’t write it with zoom:1 in it, I will write it for the next topic). The corresponding demo- Use pseudo-class: after to clean up the pseudo-class layer with subsequent empty height bit zero
- Use css overflow:auto to support height
- Use css overflow:hidden to generate weird adaptations
- Use display:table to turn objects into table form
- Use div tags and css clear attributes
- Use br tags and css clear attributes
- Use the br tag, and its own html clear attribute
On a rough look, they can all solve the problem; however, on the other hand, they have their own pros and cons. (Complied by one)- Advantages Structure semantics are completely correct and will not cause any other weird problems. Disadvantages Improper reuse method can easily cause the code volume to increase sharply. It is recommended for people who use the outermost layer when it is floating, or use it clearly in a modular way.
- Advantages The structure is completely correct and the code volume is very small. Disadvantages After multiple nestings, clicking on the outermost floating box will be selected from the outermost to the innermost content (ff); or when the mouseover causes the width to change, the outermost module will have a scroll bar (ie). It is recommended to use internal modules, please do not nest them.
- Advantages The structure is completely correct and the code volume is very small. When the disadvantages increase, the content is likely to be hidden without automatically wrapping the line. It is recommended to use it when the width is fixed, and do not nest it.
- Advantages The structure is completely correct and the code volume is very small. The attributes of the disadvantage box model have changed, and you can imagine that there are naturally so many strange events that you can't even count. It is recommended that if you don’t want to change the bug, it is best not to use it; however, it can be tested as a temporary fool in the alpha version.
- Advantages: Very small number of codes and extremely high reusability. The disadvantages are completely ineffective in adapting to semantics, which is not conducive to revision and requirements changes. It is recommended for beginners to use it, which allows you to quickly solve floating problems.
- Advantages The degree of semanticization is better than the fifth case; the code volume is very small and the reusability is extremely high. The semanticization of disadvantages is still imperfect, which is not conducive to revision and demand changes. It is recommended for beginners to use it, which allows you to quickly solve floating problems.
- Advantages The degree of semanticization is better than in the 5th and 6th cases; the number of codes is the smallest and the reusability is extremely high. The semanticization of disadvantages is still imperfect, which is not conducive to revision 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 era of web pages in web1.0 to directly use html attributes to control performance. After all, the latter has less code.
Finally, the list is completed. However, I think it is necessary to apologize to everyone about the article reprinted by ghosts before. What I regret is that I changed the title of ghosts and changed the simplest to optimal, so that many students were misled later. So I wrote a rewritten article to share.
