CSS Clear Float

What is css clear float?

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.

My understanding is: the child element floats, is floating to the page document, the parent element is equal to cannot find the child element and cannot be open, when the parent element is in the F12, may see has the width, but the height is 0px; so that some properties of the parent element are invisible (0px height Of course, some things will not be visible.)

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:right;} <div class= "News" ><p>some text</p></div>

So the parent element new is not enclosing the two-character element

Clear Floating method

Method One: Use an empty element with the clear property

. news {Background-color:gray; border:solid 1px black;}. News img {float:left;}. News p {float:right;}. clear {Clear:both;}
<div class= "News" ><p>some text</p><div class= "Clear" ></ Div></div>

Pros: Simple, less code, better browser compatibility.

Cons: You need to add a lot of non-semantic HTML elements, the code is not elegant, late maintenance is not easy.

Method Two: Use CSS's Overflow property

Add Overflow:hidden to the container of the floating element, or overflow:auto; You can clear the float, and you also need to trigger haslayout in IE6, such as setting the container width height for the parent element or setting zoom:1.

After adding the overflow attribute, the floating element goes back to the container layer, and the container is propped up to achieve the effect of cleaning and floating.

. news {Background-color:gray; border:solid 1px black; overflow:hidden;
  *zoom:1; }.news img {float:left;}. News p {float:right;} <div class= "News" ><p>some text</p></div>

Method Three: Add a float to the container of the floating element

Floating elements can also be added with floating properties to clear the inner float, but this will make it whole floating, affecting the layout, not recommended.

Method four: Using adjacency elements to process

Do nothing, add the clear property to the element that follows the floating element.

. news {  background-color:gray; border:solid 1px black;}. News img {float:left;}. News p {  float:right;}. content{Clear:both;} <div class= "News" ><p>some text</p><div class= "content" >< /div></div>

Method five: Using CSS: after pseudo-elements

Binding: After pseudo-element (note that this is not a pseudo-class, but a pseudo-element, representing the most recent element after an element) and iehack, can be perfectly compatible with the current mainstream of the major browsers, here Iehack refers to the trigger haslayout.

Add a Clearfix class to the container of the floating element, and then add one to the class: After the pseudo element implements the element end to add an invisible block element to clean up the float.

. news {  Background-color:gray;  Border:solid 1px black;  }. News img {  float:left;  }. News p {  float:right;  }. clearfix:after{  Content: "020";   Display:block;   height:0;   Clear:both;   Visibility:hidden;    }. Clearfix {/  * triggers haslayout */   zoom:1;   } <div class= "News clearfix" ><p>some text</p></div>

The CSS pseudo-element finally adds an invisible space "020" or a dot "." to the inner element of the container, and gives the clear property to clear the float. Note that in order to IE6 and IE7 browser, to Clearfix this class to add a zoom:1; trigger haslayout.

Original address: http://www.cnblogs.com/ForEvErNoME/p/3383539.html

Look at this address of the article understand the clear float and thank the great God

CSS Clear Float