css 清楚浮動的8種方式

標籤：高度   通過   span   swift   代碼   等等   googl   2.0   style   

清除浮動是每個 web前台設計師必須掌握的機能。

css清除浮動大全，共8種方法。

浮動會使當前標籤產生向上浮的效果，同一時候會影響到前後標籤、父級標籤的位置及 width height 屬性。並且相同的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽器安全色性方面還有問題。

以下總結8種清除浮動的方法（測試已通過 ie chrome firefox opera，後面三種方法僅僅做瞭解就能夠了）：

1，父級div定義 height

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：父級div手動定義height。就攻克了父級div無法自己主動擷取到高度的問題。

長處：簡單、代碼少、easy掌握

缺點：僅僅適合高度固定的布局。要給出精確的高度，假設高度和父級div不一樣時，會產生問題

建議：不推薦使用。僅僅建議高度固定的布局時使用

2，結尾處加空div標籤 clear:both


代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>

原理：加入一個空div，利用css提高的clear:both清除浮動，讓父級div能自己主動擷取到高度

長處：簡單、代碼少、瀏覽器支援好、不easy出現怪問題

缺點：不少剛開始學習的人不理解原理。假設頁面浮動布局多，就要添加非常多空div。讓人感覺非常不好

建議：不推薦使用。但此方法是曾經主要使用的一種清除浮動方法

3，父級div定義 偽類:after 和 zoom


代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

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

長處：瀏覽器支援好、不easy出現怪問題（眼下：大型網站都有使用。如：騰迅。網易，新浪等等）

缺點：代碼多、不少剛開始學習的人不理解原理，要兩句代碼結合使用才幹讓主流瀏覽器都支援。

建議：推薦使用，建議定義公用類，以降低CSS代碼。

4，父級div定義 overflow:hidden

代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同一時候不能定義height，使用overflow:hidden時。瀏覽器會自己主動檢查浮動地區的高度

長處：簡單、代碼少、瀏覽器支援好

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

建議：僅僅推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

5，父級div定義 overflow:auto

代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同一時候不能定義height，使用overflow:auto時。瀏覽器會自己主動檢查浮動地區的高度

長處：簡單、代碼少、瀏覽器支援好

缺點：內部寬高超過父級div時，會出現滾動欄。

建議：不推薦使用，假設你須要出現滾動欄或者確保你的代碼不會出現滾動欄就使用吧。

6。父級div 也一起浮動

代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：全部代碼一起浮動，就變成了一個總體

長處：沒有長處

缺點：會產生新的浮動問題。

建議：不推薦使用。僅僅作瞭解。

7，父級div定義 display:table

代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：將div屬性變成表格

長處：沒有長處

缺點：會產生新的未知問題。

建議：不推薦使用，僅僅作瞭解。

8。結尾處加 br標籤 clear:both

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>

原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標籤 clear:both

建議：不推薦使用，僅僅作瞭解。

 

<iframe id="cproIframe_u811641_2" height="250" marginheight="0" src="http://pos.baidu.com/acom?adn=3&amp;at=103&amp;aurl=&amp;cad=1&amp;ccd=32&amp;cec=gb2312&amp;cfv=18&amp;ch=0&amp;col=zh-cn&amp;conOP=0&amp;cpa=1&amp;dai=2&amp;dis=0&amp;ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D7LTEH3QmZ-Iezu6yOEc8Z2FWp58BcBit3wCE6TI8rlTINXE0o2pDNMXSd811dhvy%26wd%3D%26eqid%3Dda9ddabd00017a6a0000000555da8236&amp;ltu=http%3A%2F%2Fwww.jb51.net%2Fcss%2F173023.html&amp;lunum=6&amp;n=jb51_cpr&amp;pcs=1353x583&amp;pis=10000x10000&amp;ps=521x832&amp;psr=1366x768&amp;pss=1353x799&amp;qn=8e44b610bc8408d9&amp;rad=&amp;rsi0=300&amp;rsi1=250&amp;rsi5=4&amp;rss0=%23ffffff&amp;rss1=%23ffffff&amp;rss2=%23006699&amp;rss3=%23333333&amp;rss4=%23333333&amp;rss5=&amp;rss6=%23e10900&amp;rss7=&amp;scale=&amp;skin=&amp;td_id=811641&amp;tn=text_default_300_250&amp;tpr=1440383743644&amp;ts=1&amp;version=2.0&amp;xuanting=0&amp;dtm=BAIDU_DUP2_SETJSONADSLOT&amp;dc=2&amp;di=u811641&amp;ti=CSS%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E5%A4%A7%E5%85%A8%E5%85%B18%E7%A7%8D%E6%96%B9%E6%B3%95_CSS%E6%95%99%E7%A8%8B_CSS_%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&amp;tt=1440383742605.2070.2494.2498" frameborder="0" width="300" allowtransparency="" marginwidth="0" scrolling="no" align="center,center"></iframe>清除浮動是每個 web前台設計師必須掌握的機能。

css清除浮動大全。共8種方法。

浮動會使當前標籤產生向上浮的效果，同一時候會影響到前後標籤、父級標籤的位置及 width height 屬性。

並且相同的代碼。在各種瀏覽器中顯示效果也有可能不相同。這樣讓清除浮動更難了。

解決浮動引起的問題有多種方法，但有些方法在瀏覽器安全色性方面還有問題。

以下總結8種清除浮動的方法（測試已通過 ie chrome firefox opera，後面三種方法僅僅做瞭解就能夠了）：

1。父級div定義 height

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：父級div手動定義height。就攻克了父級div無法自己主動擷取到高度的問題。

長處：簡單、代碼少、easy掌握

缺點：僅僅適合高度固定的布局，要給出精確的高度，假設高度和父級div不一樣時，會產生問題

建議：不推薦使用。僅僅建議高度固定的布局時使用

2。結尾處加空div標籤 clear:both

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>

原理：加入一個空div，利用css提高的clear:both清除浮動。讓父級div能自己主動擷取到高度

長處：簡單、代碼少、瀏覽器支援好、不easy出現怪問題

缺點：不少剛開始學習的人不理解原理；假設頁面浮動布局多，就要添加非常多空div。讓人感覺非常不好

建議：不推薦使用，但此方法是曾經主要使用的一種清除浮動方法

3。父級div定義 偽類:after 和 zoom

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：IE8以上和非IE瀏覽器才支援:after。原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

長處：瀏覽器支援好、不easy出現怪問題（眼下：大型網站都有使用，如：騰迅。網易，新浪等等）

缺點：代碼多、不少剛開始學習的人不理解原理，要兩句代碼結合使用才幹讓主流瀏覽器都支援。

建議：推薦使用，建議定義公用類，以降低CSS代碼。

4，父級div定義 overflow:hidden

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1。同一時候不能定義height，使用overflow:hidden時，瀏覽器會自己主動檢查浮動地區的高度

長處：簡單、代碼少、瀏覽器支援好

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

建議：僅僅推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

5，父級div定義 overflow:auto

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同一時候不能定義height。使用overflow:auto時，瀏覽器會自己主動檢查浮動地區的高度

長處：簡單、代碼少、瀏覽器支援好

缺點：內部寬高超過父級div時，會出現滾動欄。

建議：不推薦使用，假設你須要出現滾動欄或者確保你的代碼不會出現滾動欄就使用吧。

6，父級div 也一起浮動

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：全部代碼一起浮動。就變成了一個總體

長處：沒有長處

缺點：會產生新的浮動問題。

建議：不推薦使用。僅僅作瞭解。

7，父級div定義 display:table

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：將div屬性變成表格

長處：沒有長處

缺點：會產生新的未知問題。

建議：不推薦使用。僅僅作瞭解。

8，結尾處加 br標籤 clear:both

複製代碼代碼例如以下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>

原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標籤 clear:both 

css 清楚浮動的8種方式