前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式？
在前端开发过程中，我们经常会使用到浮动(float)，这个我们即爱又恨的属性。爱，是因为通过浮动，我们能很方便地进行布局；恨，是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法，希望对大家有所帮助。
方法1：使用带clear属性的空元素
使用空标签清除浮动：在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签（理论上可以是任何标签，但常用<div>和<p>）清除浮动，并为其定义CSS代码clear:both。
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div>
<div>left</div>
<div>right</div>
<div></div>
</div>
</body>
</html>优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法2：使用CSS的overflow属性
使用overflow清除浮动：只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div>
<div>left</div>
<div>right</div>
</div>
</body>
</html>优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
方法3：使用CSS的:after伪元素
对父元素使用:after伪元素，设置display:table。
display:table 使生成的元素以块级表格显示，占满剩余空间。
通过content: " "生成内容作为最后一个元素，至于content里面是什么都是可以的，CSS经典的是 content:"."，有些版本可能content里面内容为空。
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after {
content: " ";
display: table;
clear: both;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div>
<div>left</div>
<div>right</div>
</div>
</body>
</html>缺点：适合现代浏览器，不支持IE6/7，*zoom: 1就是为了兼容IE6/7
- 上一篇 »css清除浮动的3种方式
- 下一篇 »CSS清除浮动大全共8种方法