According to css norms, floating elements (floats) will be removed from document flow, it will not affect the layout of the massive box and the box will only affect the (usually text) arrangement.    So when their heights exceeded includes containers, general elongation father containers will not be automatically closed to the floating element.    But sometimes we need this kind of automatic closure, specifically how to deal with it? 

  There is a practice that is in the Father containers to insert an additional label, and its removal of the floating (clear) to hold Dafu containers.    This method browser compatibility, and there is no question of disadvantage is the need for the additional (and usually is no semantic) label, so I personally do not like.    Subsequently, a new approach: after pseudo-dynamic embedded in a category for the removal of the floating element, and this method, as a principle, different only by the content of this additional CSS generation, but considering IE does not support that: after had to do a lot of hack.    This method compatibility general, but after all hack but also cope with different browsers, at the same time and can ensure html relatively clean, or use more of.    Then It was also found that the father containers will be set apart from the overflow visible on the outside of value in the standards-compliant browser closure floating elements, IE is not a natural support, so this method, and a method to all the same IE done a different treatment (that trigger specific layout), the overflow is no different: after pseudo-type trouble then, there are also shortcomings, the overflow could generate some small conflicts.    In the use of overflow also had a prior use of the Float method is to let the father also floating containers, which used to the characteristics of a floating Element - the floating element will be closed floating elements.    In this way IE / Win and standards-compliant browser have good results, but also very obvious shortcomings - father of containers may not want to float on the floating, floating, after all, is a special act, and sometimes does not allow its layout Floating also normal.    Although the use of float in the IE and standards-compliant browser can be closed floating element, the principle is different, IE / Win float in the layout thus trigger closure of the floating, and in standards-compliant browser, and in fact on a float Ways in the overflow principle, resulted in a "block-level formatting of the" - this is mentioned in the CSS regulate a phenomenon, which often have some independence, is one of the properties will be automatically closed internal floating elements. 

  In accordance with the norms, the following types of elements will produce a block-level formatting: 

•   Floating elements can be left or right. 
•   Absolute positioning elements. 
•   Inline-block elements, but currently does not support this gecko. 
•   Table-cell type elements, in fact table, table-head-group, table-row also what can be, and inline-table (gecko does not support) also, because they would indirectly result in a table-cell anonymous. 
•   Overflow value of the non-visible elements. 

  Therefore, in the original standards-compliant browser, we can have so many ways closed a floating element, but only need CSS, without the other.    Incidentally said overflow addition to the above, the rest have an additional effect is the automatic contraction father containers width. 

  For IE / Win, it has a system of its own, is the layout, with layout elements will be automatically closed floating elements, and then look at the css attributes trigger layout, and will be found above the block-level formatting scope similar to a lot of : 

•   Floating elements 
•   Absolute positioning elements 
•   Display: inline-block 
•   Zoom 
•   Width / height 
•   Overflow / overflow-x / overflow-y [IE7 new] 
•   Max / min-width / Height [IE7 new] 

  IE in the closure of more than floating elements are also quite a number of ways, naturally it also has its limitations, or a fringe effect, or the use of non-standard attributes (not verified). 

  Also mention that the display: inline-block, this attribute IE on their own terms with no actual effect is to add an element of the layout secretly, but standards-compliant browser is recognize this property, so either of those here , will be required to Display a default.    IE has a bug here, the first definition display: inline-block and then to display a block (which has two display to a statement on CSS only two results), then the layout will not disappear at the same time this will affect other browser, we now, this is a good trigger layout approach: 

  . Gainlayout (display: inline-block;) 
  . Gainlayout (display: block;) so close to cross-browser floating elements, or can choose a lot of ways, how to use these with CSS attribute to the specific circumstances in a specific analysis, flexible conditions of the Notes also very necessary, it will not do if we come back to Clear there can be just.