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

来源：懂视网责编：小采时间：2020-11-27 18:49:17

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

几种CSS清除浮动的方法分享:本文主要和大家分享几种CSS清除浮动的方法，希望能帮助到大家。1、父级p定义height <style type="text/css"> .p1{background:#000080;border:1px solid red;height:200px;} .left{float:left;wi

推荐度：

点击下载本文 文档为doc格式

导读几种CSS清除浮动的方法分享:本文主要和大家分享几种CSS清除浮动的方法，希望能帮助到大家。1、父级p定义height <style type="text/css"> .p1{background:#000080;border:1px solid red;height:200px;} .left{float:left;wi

本文主要和大家分享几种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清除浮动的方法分享

推荐度：

点击下载本文 文档为doc格式

标签：方法种方法的方式

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐