几种CSS清除浮动的方法分享-css教程-PHP中文网

几种CSS清除浮动的方法分享

小云云

发布： 2018-02-28 10:58:49

原创

1132人浏览过

本文主要和大家分享几种CSS清除浮动的方法，希望能帮助到大家。

1、父级p定义height

<style style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15716.html" target="_blank">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> </p><p>Left</p> <p>Right</p>

登录后复制

父级p手动定义height，就解决了父级p无法自动获取高度的问题（只建议高度固定的布局使用）

2、结尾处加空p标签 clear:both

<style> .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> </p><p>Left</p> <p>Right</p> <p></p>

登录后复制

添加一个空p，利用css提高的clear：both清除浮动，让父级p自动获取高度（以前使用的较多）

登录后复制

3、父级p定义伪类:after和 zoom

<style> .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> </p><p>Left</p> <p>Right</p>

登录后复制

IE8以上和非IE浏览器才支持:after,zoom(ie专有属性)可解决IE6、IE7浮动问题

4、父级p定义 overflow:hidden

<style> .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> </p><p>Left</p> <p>Right</p>

登录后复制

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

登录后复制

5、父级定义: overflow:auto

<style> .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> </p><p>Left</p> <p>Right</p>

登录后复制

必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

登录后复制

6、父级p也一起浮动

<style> .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> </p><p>Left</p> <p>Right</p>

登录后复制

所有代码一起浮动，会产生新的浮动，仅作了解

7、父级p定义 display:table

<style> .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> </p><p>Left</p> <p>Right</p>

登录后复制

将p的属性变成表格

8、结尾处加 br标签 clear:both

<style> .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> </p><p>Left</p> <p>Right</p> <br>

登录后复制

父级p定义zoom：1来解决IE浮动问题，结尾处加br标签clear：both