首頁  >  文章  >  web前端  >  幾種CSS清除浮動的方法分享

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

小云云
小云云原創
2018-02-28 10:58:491290瀏覽

本文主要和大家分享幾種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清除浮動的方法

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

以上是幾種CSS清除浮動的方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn