整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
动的目的：把多个盒子放在一行上
清除浮动的目的：解决父盒子高度为0的问题
清除浮动，也称闭合浮动
注：本文不兼容IE6
未清除浮动实现情况：
图1
清除后：
图2
原代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
具体方法：
1.额外标签法
在含浮动标签后加兄弟盒子清除浮动
例：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clearbox"></div>
</div>
</body>
</html>
复制代码
缺点：添加了许多空div
2.给父盒子overflow:hidden
触发bfc模式（该名词不懂请谷歌/百度，初学者可暂时略过)，直接清除浮动
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
缺点：不可与position属性配合使用
3.伪元素法
给父元素定义伪类:after(此处使用的是公共类clearfix）
复制代码
.clearfix:after{
content:"";/*内容为空*/
visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/
display:block;/*变成块级元素*/
height:0;
clear:both;/*清除浮动*/
}
复制代码
具体代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.clearfix:after{
content:"";/*内容为空*/
visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/
display:block;/*变成块级元素*/
height:0;
clear:both;/*清除浮动*/
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
缺点：IE8以上和非IE浏览器才支持
4.双伪元素法
给父类加上伪类:before和:after
复制代码
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
复制代码
具体代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
复制代码
附：
对于上述4种方法，优先推荐方法3和4，当然1和2也可，可根据具体情况使用。
还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起.
最后你觉得我们的文章对你有帮助，欢迎关注我，可以私信我：久伴，领取学习资料，在评论下方可以关注我的学习群，你可以随时在上面向我们提问，把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题，希望久伴可以伴随你从入门到专家。
天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
首先，这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。
下面我就讲3种常用清除浮动的方法，够用了。
1、在浮动元素后面加一个空的div，并为它清除浮动
html代码：
<div class="wrap"> <div class="float">浮动</div> <div class="clear"></div> <div class="nofloat">不想被浮动影响</div></div>css代码：
.wrap{ width:500px; height:400px; border:1px solid red; margin:0 auto;}.float{ width:200px; height:200px; background:#ccc; float:left;}.nofloat{ width:300px; height:150px; background:red;}现在虽然加了一个空的div，但是并没有给它清除浮动，所以目前的效果就是第三个子元素.nofloat还是收到浮动的影响。
OK，现在给.clear加上清除浮动：
.clear{ clear:both;}刷新一下效果就出来了：
PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。
2、利用BFC特性清除浮动
html代码：
<div class="wrap"> <div class="float">浮动</div> <div class="nofloat">不想被浮动影响</div></div>css代码：
.wrap{ width:500px; border:1px solid red; margin:0 auto; overflow:hidden;}.float{ width:200px; height:200px; background:#ccc; float:left;}.nofloat{ width:300px; height:150px; background:red; overflow:hidden;}效果是这样的：
这里父容器是没有设置固定高度的，本来第一个子元素浮动之后，父元素的高度会塌陷到跟第二个子元素一样高，但由于这里分别给第二个子元素和父元素都设置了overflow:hidden ，所以它们都生成了一个新的BFC区域，根据上文提供的BFC布局规则可以得知：BFC区域不会与float box 重叠；计算BFC高度时浮动元素的高度也参与计算。
所以就得到清除浮动的效果。说得比较绕，但其实清除浮动得根据自己开发中的实际情况合理使用。
3、使用：after伪元素，给浮动元素的父元素清除浮动
html代码：
<div class="wrap"> <div class="float">浮动</div></div>css代码：
.wrap{ width:500px; border:1px solid red; margin:0 auto;}.float{ width:200px; height:200px; background:#ccc; float:left;}此时子元素浮动了，脱离了文档流，所以父元素高度酒塌陷了：
可以看到父元素的边框挤在一起了。
OK，现在给父元素添加一个clearfix类：
<div class="wrap clearfix"> <div class="float">浮动</div></div>.clearfix{ *zoom:1;}.clearfix:after{ content:'clear'; display:block; height:0; clear:both; overflow:hidden; visibility:hidden;}现在刷新后的效果就是：
这种方法和BFC清除浮动个人用的比较多，实际开发中，其实这两种就够用了。
好的，清除浮动我也就简单地提到这里！
以上就是CSS清除浮动的几种方法的详细内容。如果有什么错误的话，欢迎留言指正。
楚浮动对于前端学习者是比较了解的，刚开始接触前端就需要了解，那你知道HTML/css清除浮动的方法都有哪些？小猿圈web前端讲师总结了几个方法，希望可以帮助你学习前端。
清除浮动
当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动
清除浮动不是不浮动，是清除浮动产生的不利影响
清除浮动的方法
* 给浮动元素的父元素设置高度
* 额外标签法
>给最后一个浮动元素后边添加额外标签，使用clear:both; 不推荐使用，会产生冗余代码。
* 给浮动元素的父元素使用overflow:hidden; 触发bfc,
>如果有子元素，出了父元素的范围，多出的部分会隐藏掉。
* 后伪元素清除浮动
给浮动元素的父元素使用clearfix
.clearfix:after {
content:”.”;
display:block;
height: 0;
line-height: 0;
visibility:hidden;
clear:both;
}
.clearfix {
*Zoom: 1;
}
* 双伪元素清除浮动
给浮动元素的父元素使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:'''';
display: table;
}
.clearfix:after {
clear: both;
}
以上就是小猿圈web前端讲师对于HTML/css清除浮动的方法的介绍，既然学到了那就去快去试验一下吧，记住学习上或者工作上遇到什么问题可以到小猿圈网站上寻找答案的，里面有最新最全的视频还有助教老师指导你学习。
*请认真填写需求信息，我们会在24小时内与您取得联系。
