How to clear floating using CSS

This article mainly introduces the use of CSS to clear the floating method, it is worth noting that not every time simply to remove the floating can solve the related problems, the final discussion of the closed floating scheme is also worth a try, the need for friends can refer to the next

Clear Floating method
Method One: Use an empty element with the clear property

After floating the element, use an empty element such as <p class= "clear" ></p>, 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:rightright;     }   . Clear {     clear:both;     }

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

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:rightright;     }

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

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:rightright;     }   . content{     clear:both;     }

<p class= "News" ><p>some text</p><p class= "content" >***</ P></p>

Note that the p.content here have content.

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:rightright;     }   . clearfix:after{     Content: "020";      Display:block;      height:0;      Clear:both;      Visibility:hidden;       }   . Clearfix {/     * triggers haslayout */  zoom:1;      }

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

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:

The first is to use the clear property, including adding an empty p 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 an element with the content at the end of the element to a point with the Clear:both attribute.

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.

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.

PostScript: Clear floating or closed floating?
In the layout of the page we will often use the float, with it we can more easily achieve the effect we want, but the floating will often leave some hidden trouble. At this point, we usually do one thing to clear the float, but clearing the float will often leave a hidden danger, the following code:

<! DOCTYPE html>   

As follows:

Although the float is cleared with clear:both in foot, the height of the main cannot be adapted to the height of the child elements, resulting in collapse (as indicated by the arrow).

The following describes the closed float, as the name implies, is to make floating elements closed, clear the impact of floating. At present, the more commonly used method of clearing float is clearfix. Specifically, instead of adding clear:both to foot, insert the following line of CSS:

#main: after{               content: '. ';               height:0;               Visibility:hidden;               /*display:block;*/            clear:both;           }