CSS Clear Float

First, the purpose of clearing the float.

1, when the height of a parent element is not written or auto, and the parent element has a floating child element, then the height of the parent element will not automatically adapt to the height of the child element, it can be said that the height is 0px;

The following code is available:

    <div class= "DIVP" style= "width:300px; background:red; border:3px solid #000000; " >        <div style= "height:300px;float:left; background-color:green" >123123</div>    </div>

The parent element of this code is not set in height, and there are child elements with a left floating height of 300px. The actual display effect is:

　　　　

As you can see, the parent div is only displayed as the height of its bounding box, and it does not fit the height of its child elements, and to correctly display the parent element's bounding rectangle, the float is cleared at this point. Based on the original code, we add a <br/> to clear the floating, the actual code is as follows:

    <div class= "DIVP" style= "width:300px; background:red; border:3px solid #000000; " >        <div style= "height:300px;float:left; background-color:green" >123123</div>        <br/style= "Clear:both;" >//This line code is used to clear floating    </div>

Now take a look at the effect now:

　　　　

Note: To clear the floating elements in the correct position, the floating elements must be placed snugly.

2, layout dislocation problem.

Because floating elements are out of standard document flow, other non-floating elements may be misaligned by this effect.

For example, the following code is available:

<div style= "border:2px solid #000; width:320px; " >        <div style= "Width:100px;height:100px;float:left border:1px solod #555" > Left floating elements </div>        < Div style= "width:100px;height:100px;float:right; border:1px solod #AAA "> Right floating elements </div></div>        <div> look at my location </div>

In theory, the bottom div has nothing to do with the div above, so it automatically goes to the bottom line of the div above. Look at the effect:

　　　　

Can see, the effect is not as expected, the reason, or the above parent div height does not adapt to the sub-floating element, the height is only the height of the border, thus the following div automatically overhead, so to this dislocation

Let's rewrite the above code as follows:

<div style= "border:2px solid #000; width:320px; " >        <div style= "Width:100px;height:100px;float:left border:1px solid #555555" > left floating elements </div>        <div style= "width:100px;height:100px;float:right; border:1px solid #AAAAAA "> right floating element </div>        <br style=" Clear:both; "/></div>        <div> Take a look at my location </div>

The above code simply adds a <br/> element to clear the float to see the final effect.

　　　　

See that the effect is correct.

But what happens if you clear the position of a floating element without being properly positioned? Then rewrite the following code:

<DivStyle= "border:2px solid #000; width:320px; "><DivStyle= "Width:100px;height:100px;float:left; border:1px Solid #555555 "> Left floating Element</Div><DivStyle= "Width:100px;height:100px;float:right; border:1px Solid #AAAAAA "> Right floating element </div></div> <br style= "clear:both;" />//Slightly adjusts the position of the cleared floating element <div> Look at my location </div> </Body >                    

The effect is as follows:

　　　　

As you can see, although the position of the following div is correct, the parent element above does not fit the height of the sub-floating element.

Today the company's front-end sent me a clear floating solution list, feel very good, and some even see have not seen. Tidy up as follows:

1. Float disadvantage: The layer to look up, endless, to the body that, is the head  <clear/> disadvantage: Each time to add this newline character 6. Clear:after {content: ' \20 '; Clear:both; Display:block;　　Downside: If the code is a bit more, it's also called a disadvantage ... In addition, if the parent is not wide, the parent must be added: zoom:1; To solve the problem under IE6 IE7   

CSS Clear Float