css--Clear Floating Method detailed

To clear the float first to figure out why you need to clear the float, if not clear what will affect the float

1, why to clear floating, because the floating element itself will be out of the document flow, for the elements of the same level, the elements behind the floating element will occupy the original position of the floating element, the parent element will be "collapsed" if the parent element is not set to a wide height

2. Understand why to clear the float, the following need to split the category of floating elements; As above, clear float is generally divided into two categories: 1. Clear the sibling element floating, 2. Clear the effect of floating on parent elements

3. Clear the sibling element floating, this is the simplest

As can be seen, I gave div123 all added floating, so they out of the document flow, content does not add floating, so he ran to the bottom of the div123, resulting in this situation, and now I do not want him at the bottom of div123 only need to add

. Content { Clear:}

2. Clear the effect of floating to the parent element

, I added a float to div123, the parent just added a 10px border, which caused the collapse of the parent element, how to clear the effect of the above

Method One, empty label method

<div style= "Clear:both" ><div<><br style= "Clear:both"/>

Both of these methods are possible, but this creates an impact, and the page has a few more tags, destroying the structure of the page elements

Method two: After Pseudo-class method

. box{  content: "";  Display:block;  height:0;  Clear:both;}

This allows the parent element to successfully wrap three Div, but don't forget, ie there are a few dad, we have to write on

. box{Zoom:1}

For compatibility with IE67

Method Three: Overflow

. Box{overflow:hidden}

This method is also relatively concise, and still be used in many large sites at home and abroad, but this overflow attribute will not be abandoned, but also worth considering, so it is recommended method two

css--Clear Floating Method detailed