Summarize the content overflow problem of CSS floating and the method of clearing floating

CSS float floating effect in some cases very unstable, the control is not good when the general or clear floating for the better, here we summarize the CSS floating poor content overflow problem and the method of clearing floating

Throw a problem Brick (display:block) First look at the phenomenon:
In non-IE browsers (such as Firefox), when the height of the container is auto, and the contents of the container are floating (float is left or right), in which case the height of the container cannot be automatically stretched to fit the height of the content. A phenomenon that causes content to overflow outside the container and affect (or even destroy) the layout. This phenomenon is called floating overflow, in order to prevent the occurrence of this phenomenon of CSS processing, called CSS to clear the float.
For example, the news container does not enclose floating elements.

. news {     Background-color:gray;     Border:solid 1px black;     }   . News img {     float:left;     }   . News p {     float:rightright;     }

<p class= "News" ><p>some text</p></p>

Clear float:

1, add <br/> tag after floating element;

<br/> tags have their own clear floating properties;

2, add a clear floating layer behind the floating element;

<p> <p style= "Float:left" ></p> <p style= "Float:left" ></p> <p style= "Clear:both" & Gt;</p> </p>

3, add Overflow:auto style to floating element;

4, set the following style for the last floating element:

/* Clear floating */.clearfix:after {    visibility:hidden;    Display:block;    font-size:0;    Content: "";    Clear:both;    height:0;   }   . Clearfix {    zoom:1;   }

The principle is that it is used in the "advanced" browser: After Pseudo-class adds a non-display:none invisible block of content to the floating block and sets Clear:both to clean up the float. Add Haslayout to the floating block in IE6 and 7 to keep the floating block high and affect the flow of the document normally.
5, another concise approach:

. Cf:before,. cf:after {       content: "";       display:table;   }   . cf:after {       clear:both;   }   . CF {       zoom:1;   }

The principle is still the same. Use: After pseudo class to provide clear:both after a floating block. The difference is that hiding this space is using display:table. rather than setting visibility:hidden;height:0;font-size:0; Such a hack.

It is worth noting here: before Pseudo-class. In fact, he is to deal with the Top-margin side folding, and clean up the float is not much of a relationship. But because the float creates a block formatting context, so that the floating element on another element if there is just margin-bottom and this floating element just has margin-top, should let them do not fold (although this situation is not common).