Recommended CSS to clear floating methods

parent Div definition Pseudo-class : after
principle: IE8 and non- ie browsers are supported : After,Zoom (IE has properties ) can be resolved Ie6,ie7 Floating Problem  

<styletype= "Text/css">. Div1{background:#000080;Border:1px solid Red;}. Div2{background:#800080;Border:1px solid Red;Height:100px;Margin-top:10px}. Left{float: Left;width:20%;Height:200px;background:#DDD}. Right{float: Right;width:30%;Height:80px;background:#DDD} /*Clear Floating Code*/. Clearfloat:after{content:"";Clear:both;Display:Block;Height:0;Visibility:Hidden;}. Clearfloat{Zoom:1} </style> <Divclass= "Div1 clearfloat"> <Divclass= "Left">Left</Div> <Divclass= "Right">Right</Div> </Div> <Divclass= "Div2">Div2</Div>

Advantages: Browser support is good, not prone to strange problems (currently: large sites are used, such as: Tencent, NetEase, Sina, etc.)

Disadvantages: Many code, many beginners do not understand the principle, to use two code together to let the mainstream browser support.
Recommendation: recommended, we recommend defining public classes to reduce CSS code.

Expansion: Large collection of methods for clearing floating
1, parent div defines height
Recommendation: Not recommended, only recommended for highly fixed layouts when used
2, add empty div tag at the end Clear:both
Recommendation: Not recommended, in the new web standards should try to avoid the appearance of the page in the non-identifying meaning of empty tags
3, Parent div definition Overflow:hidden
Recommendation: cannot be used in conjunction with position, because the size of the excess will be hidden < expanded: You can also use position in the parent tag of the position tag to resolve the >
4, parent-defined Overflow:auto
Recommendation: You must define width or zoom:1, and you cannot define height, and when using Overflow:auto, the browser will automatically check the height of the floating area is deprecated, if you need to appear scroll bar can be used
5, the parent Div also floats together
Recommendation: No merit, not recommended, will create a new floating problem, if the structure of a simple label can be used < such as: in the right side of the header section, because of the particularity >
6, Parent div definition display:table
Recommendation: Turn div attributes into tables, not recommended

Recommended CSS to clear floating methods