幾種CSS清除浮動的方法分享

本文主要和大家分享幾種CSS清除浮動的方法，希望能協助到大家。

1、父級p定義height

<style type="text/css"> .p1{background:#000080;border:1px solid red;height:200px;}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p></p>

父級p手動定義height，就解決了父級p無法自動擷取高度的問題（只建議高度固定的布局使用）

2、結尾處加空p標籤 clear:both

<style type="text/css"> .p1{background:#000080;border:1px solid red}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}    .clearfloat{clear:both}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p> <p class="clearfloat"></p></p>

添加一個空p，利用css提高的clear：both清除浮動，讓父級p自動擷取高度（以前使用的較多）

3、父級p定義偽類:after和 zoom

<style type="text/css"> .p1{background:#000080;border:1px solid red;}    .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><p class="p1 clearfloat"> <p class="left">Left</p> <p class="right">Right</p></p>

IE8以上和非IE瀏覽器才支援:after,zoom(ie專有屬性)可解決IE6、IE7浮動問題

4、父級p定義 overflow:hidden

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;overflow:hidden}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p></p>

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

5、 父級定義: overflow:auto

<style type="text/css"> .p1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p></p>

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

6、父級p也一起浮動

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p></p>

所有代碼一起浮動，會產生新的浮動，僅作瞭解

7、父級p定義 display:table

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;display:table;margin-bottom:10px;}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p></p>

將p的屬性變成表格

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

<style type="text/css"> .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}    .left{float:left;width:20%;height:200px;background:#DDD}    .right{float:right;width:30%;height:80px;background:#DDD}    .clearfloat{clear:both}</style><p class="p1"> <p class="left">Left</p> <p class="right">Right</p> <br class="clearfloat" /></p>

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

相關推薦：

關於CSS清除浮動的方法

css清除浮動的方法

清除浮動有哪些方法及優缺點