Six ways to clear floating, strongly recommended after clear floating

Six ways to clear floating

1. Add a floating float:left to the parent level

. box{width:300px;margin:0 auto;border:10px solid #000; float:left;}

. div{Width:200px;height:200px;background:red;float:left;}

<div class= "box" > <div class= "div" ></div> </div>

2. Add Display:inline-block to the parent level

. box{width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

. div{Width:200px;height:200px;background:red;float:left;}

<div class= "box" > <div class= "div" ></div> </div>

3. Under floating elements Add <div class= "clear" ></div>. clear{Height:0px;font-size:0;clear:both;}

<div class= "box" > <div class= "div" ></div> <div class= "clear" ></div> </div>

. box{width:300px;margin:0 auto;border:10px solid #000;}

. div{Width:200px;height:200px;background:red;float:left;}

. clear{Height:0px;font-size:0;clear:both;}

4. Add <br clear= "All" under floating elements/>

<div class= "box" > <div class= "div" ></div> <br clear= "All"/> </div>

5. Parent of floating element (after clear float) recommended

{zoom:1;} * * Floating element under ie6,7, Haslayout calculates the width of the element based on the size of the content of the element or the size of the parent's parent

: after{content: ""; Display:block;clear:both;} Other browsers clear floating

. box{margin:0 auto;border:10px solid #000;}

. div{Width:200px;height:200px;background:red;float:left;}

. Clear{zoom:1;}

. Clear:after{content: ""; Display:block;clear:both;}

<div class= "box clear" > <div class= "div" ></div> </div>

6. Add Overflow:auto to the parent level; Zoom:1 (IE6)

. box{width:300px;height:300px;border:1px solid #000; overflow:auto;}

. div1{Width:260px;height:400px;background:red;float:left;}

. box{width:300px;height:300px;border:1px solid #000; overflow:hidden; zoom:1;} /*overflow:auto: It's OK.

. div1{Width:260px;height:400px;background:red;float:left;}

Six ways to clear floating, strongly recommended after clear floating