css清除浮動

源碼：

<div id="div1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div id="div2">
    div2
</div>

1.使用.clearfix----推薦使用

----給父類添加class=“clearfix”

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}//兼容IE6

2.父級div定義僞類：after和zoom

#div1:after{display: block;;clear: both; content: " ";

             visibility: hidden; height: 0;

}

#div1{zoom:1}//兼容IE

注：IE8以上和非IE瀏覽器才支持:after，原理和方法1（.clearfix）有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題 

3.父級div定義:overflow:hidden

#div1:{width: 98%;overflow: hidden;}

#div2:{width: 98%;}

注：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度 

優點：簡單、代碼少、瀏覽器支持好 

缺點：不能和position配合使用，因爲超出的尺寸的會被隱藏。 

4.父級div定義:overflow:auto

#div1:{width: 98%;overflow:auto;}

#div2:{width: 98%;}

與overflow:hidden相似

5.父級div定義:display:table

#div1{
    width: 98%;display: table;

}

#div2:{width: 98%;}

6.父級div頁一起浮動

#div1{
    width: 98%;float:left;

}

#div2:{clear:both;}

原理：所有代碼一起浮動，就變成了一個整體 
缺點：會產生新的浮動問題。 

7.父級div定義height

#div1{
    height: 200px;

}

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。 
優點：簡單、代碼少、容易掌握 
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題 

8.結尾添加空標籤

<div id="div1" class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clr"></div>
</div>
<div id="div2">
    div2
</div>

style:

.clr{ clear: both;}

原理：添加一個空div，利用css的clear:both清除浮動，讓父級div能自動獲取到高度 
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題 

缺點：會添加無意義的元素；如果頁面浮動佈局多，就要增加很多空div

9.結尾加br標籤 clear:both

<div id="div1" class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <br class="clearfloat"/>

</div>
<div id="div2">
    div2
</div>

style:

.clearfloat{ clear: both;}