CSS Tips (a): Clear floating Total clean

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.

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>

Clear Floating method

Method One: Use an empty element with the clear property

After floating the element, use an empty element such as <div class= "clear" ></div>, and give the. Clear{clear:both in the CSS;} property to clean up the float. You can also use <br class= "clear"/> or

. 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.

Summarize

From the above example, it is not difficult to see that the method of clearing floats can be divided into two categories:

One is to use the clear property, including adding an empty div with the Clear:both property at the end of the floating element to close the element, actually using: the after pseudo-element method also adds a content at the end of the element to a point with an element with the Clear:both attribute implemented.

The second is the BFC of the parent element that triggers the floating element (block formatting contexts, chunk-level formatting context), so that the parent element can contain floating elements, about this.

Recommended

Used in the main layout of the Web page: after pseudo-element method and as the main clearing-up floating mode, in small modules such as UL use Overflow:hidden; (note the possible hidden overflow element problem); if it is a floating element, you can automatically clear the inner float without extra handling The body uses adjacency elements to clean up previous floats.

Finally, you can use the relatively perfect: after pseudo-element method to clean up the float, the document structure is clearer.

CSS Tips (a): Clear floating Total clean