Full-sweep CSS float

Clear floating a general do page people will encounter a thing, but whether we can clearly know, all-round understanding? So I was free to write such an article immediately, can not talk about everything, but the basic can give me what I know.

Let's take a rough look at how many ways to clear the float (ie inside with zoom:1 will not write, the next topic to write). corresponding DEMO

using pseudo class: After the next empty high level of zero pseudo class layer to eliminate the use of CSS Overflow:auto way to support the high use of CSS Overflow:hidden way to create a strange adaptation of the use of Display:table object into table Form Use the div tag, and the clear properties of the CSS with the BR tag, and the clear property of the CSS with the BR tag and its own HTML clear attribute

Roughly speaking, they can solve the problem, but on the other hand they have their own pros and cons. (one by one corresponds)

The

advantage structure is semantically correct and does not produce the rest of the bizarre problem.


disadvantage of misuse is easy to cause a sharp increase in code volume.


recommends that the outermost light float be used, or a clear modular multiplexing approach is used by people. The advantage structure is semantically correct and the amount of code is minimal.


Disadvantages of multiple nesting, click on the outermost light floating box will be the outermost to the most inner content of the full selection (FF), or the mouseover caused by the width changes will appear the outermost module has a scroll bar (IE).


recommend the use of internal modules, do not nest. The advantage structure is semantically correct and the amount of code is minimal.


disadvantage content increase when it is very easy to not automatically wrap and content is hidden away.


recommended width is fixed when used, do not nest. The advantage structure is semantically correct and the amount of code is minimal.


Defect Box Model properties have been changed, you can imagine the singular event is more natural than you count.


suggests that if you don't want to change your bug, it's best not to use it; The advantages of code is very small, reusability is very high.


shortcomings can not perfectly adapt to the semantic, not conducive to the revision and changes in requirements.


Recommended for beginners, you can quickly solve the floating problem. The degree of semantic benefit is better than that of the 5th, the amount of code is very small, and the reusability is very high.


shortcomings are still imperfect and not conducive to revision and change in demand.


is recommended for beginners, allowing you to quickly solve floating problems. The degree of semantics is better than that of the 5th or 6 cases, with the least amount of code and the High reusability.


shortcomings are still imperfect and not conducive to revision and change in demand.


suggested that the use of beginners thinking upgrade, let it understand with its classname to control a performance, rather than return to the era of WEB1.0 pages directly with HTML attributes to control performance, after all, the latter's code is less.

Finally, the list is complete. However, I think it is necessary to apologize, about the previous reprint of the Ghost of the article, very regret that the original title of the Ghost will be "the simplest" changed to "optimal", so that the back of a lot of misleading students. So I wrote a new article to share.