网上科普有关“清除浮动的可以用哪几种方法？ ”话题很是火热 ，小编也是针对清除浮动的可以用哪几种方法？寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题，希望能够帮助到您。
1 、父级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 > <div >Left</div> <div >Right</div> </div><div >
div2 ? </div>
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似 ，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好 ，不容易出现怪问题（目前：大型网站都有使用，如：腾迅 ，网易 ，新浪等等）
缺点：代码多，不少初学者不理解原理 ，要两句代码结合使用 ，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类 ，以减少CSS代码
评分：★★★★☆
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 > <div >Left</div> <div >Right</div><div ></div></div><div > div2 ? </div>原理：添加一个空div ，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单 ，代码少 ，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div ，让人感觉很不爽
建议：不推荐使用 ，但此方法是以前主要使用的一种清除浮动方法
评分：★★★☆☆
3.父级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 > <div >Left</div> <div >Right</div> </div><div > div2 ? </div>原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单 ，代码少 ，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度 ，如果高度和父级div不一样时 ，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
评分：★★☆☆☆
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 > <div >Left</div> <div >Right</div></div><div > 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 > <div >Left</div> <div >Right</div></div><div > 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 > <div >Left</div> <div >Right</div></div><div > 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 > <div >Left</div> <div >Right</div></div><div > 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 > <div >Left</div> <div >Right</div><br /></div><div > div2 ? </div>原理：父级div定义zoom:1来解决IE浮动问题 ，结尾处加br标签clear:both
建议：不推荐使用 ，只作了解
评分：★☆☆☆☆
在非IE浏览器（如Firefox）下，当容器的高度为auto ，且容器的内容中有浮动（float为left或right）的元素 ，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象 。这个现象叫浮动溢出 ，为了防止这个现象的出现而进行的CSS处理 ，就叫CSS清除浮动 。
清除浮动方法：
1、使用带clear属性的空元素
在浮动元素后使用一个空元素如<div ></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br />或<hr />来进行清理 。
2、使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动 ，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1 。在添加overflow属性后，浮动元素又回到了容器层 ，把容器高度撑起 ，达到了清理浮动的效果。
3 、给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动 ，影响布局 ，不推荐使用 。
4 、使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性 。
5、方法五：使用CSS的:after伪元素
给浮动元素的容器添加一个clearfix的class ，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
需要注意的是为了IE6和IE7浏览器 ，要给clearfix这个class添加一条zoom:1;触发haslayout 。
总结
BFC清理浮动
通用的清理浮动法案
.clearfix{
*zoom:1;
}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
关于“清除浮动的可以用哪几种方法？ ”这个话题的介绍，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[白亦]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2230.html
评论列表（4条）
我是石号的签约作者“白亦”！
希望本篇文章《清除浮动的可以用哪几种方法？》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“清除浮动的可以用哪几种方法？”话题很是火热，小编也是针对清除浮动的可以用哪几种方法？寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够...