CSS clear Float Common method

CSS development process clear floating is difficult to avoid to use, today sacrificed nap time to tidy up!

One, to the parent to add height: This certainly does not exist in the parent collapse problem;

Problem: Extensibility is not good, if you want to adapt to the height of the sad urge.

Second, let the parent float: the parent and the child are floating there is no problem;

Problem: All elements in the page are floating, margin is automatically invalidated (floats bad!) ），

Besides, all the parents can float, and there are extensibility issues.

Third, to the parent plus display:inline-block clear Floating method:

Problem: Automatic failure of margin around;

Four, empty label clear floating

add <div class= "clear" under floating elements ></div>
. clear{Height:0px;font-size:0;clear:both;}add <br clear= "All" under floating elements/>

Problem: IE6 Minimum height 19px, (after solving IE6 and 2px deviation), does not conform to the work: structure, style, behavior, three separate requirements.

Five, after pseudo-class clear floating method (now the mainstream method)

. Clear:after {
content:";
　　Display:block;
　　Clear:both;
}. Clear{
Zoom:1;
}

After pseudo-class: add content at the end of the element;

: after{content "added content";} Incompatible under ie6,7

Zoom Scale

A, trigger IE under the haslayout, so that the elements according to their own content to calculate the width of high.

B, FF does not support;

CSS clear Float Common method