为什么要清除浮动?
清除浮动主要是为了解决父元素因为子元素浮动而引起高度为0的问题。
一个需要清除浮动的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动的常见用法</title>
<style>
.box {
border: 1px solid #FF6700;
}
.one {
width: 100px;
height: 100px;
background-color: coral;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
}
.three {
width: 500px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box">
<div class="one">盒子一</div>
<div class="two">盒子二</div>
</div>
<div class="three">盒子三</div>
</body>
</html>
效果图
如上图所示,父盒子包含盒子一和二,父盒子没有高度,因为盒子一和盒子二有高度,撑开了父盒子。当给盒子一、二添加浮动时,会发生什么?
.one {
width: 100px;
height: 100px;
background-color: coral;
float: left;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
float: left;
}
此时,父盒子变成了一条线,盒子三跑上去了,紧贴父盒子。
这个时候就出现了需要清除浮动的问题了。
清除浮动的方法
1、给父盒子增加高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动的常见用法</title>
<style>
.box {
border: 1px solid #FF6700;
height: 150px;
}
.one {
width: 100px;
height: 100px;
background-color: coral;
float: left;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
float: left;
}
.three {
width: 500px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box">
<div class="one">盒子一</div>
<div class="two">盒子二</div>
</div>
<div class="three">盒子三</div>
</body>
</html>
效果如下
2、额外标签法
在最后一个浮动标签后,新加一个标签,给其设置clear:both的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动-额外标签法</title>
<style>
.box {
border: 1px solid #FF6700;
}
.one {
width: 100px;
height: 100px;
background-color: coral;
float: left;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
float: left;
}
.three {
width: 500px;
height: 100px;
background-color: cornflowerblue;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="one">盒子一</div>
<div class="two">盒子二</div>
<div class="clear"></div>
</div>
<div class="three">盒子三</div>
</body>
</html>
效果如下
3、父级元素添加overflow属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动-父级元素添加overflow属性</title>
<style>
.box {
border: 1px solid #FF6700;
overflow: hidden;
}
.one {
width: 100px;
height: 100px;
background-color: coral;
float: left;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
float: left;
}
.three {
width: 500px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box">
<div class="one">盒子一</div>
<div class="two">盒子二</div>
</div>
<div class="three">盒子三</div>
</body>
</html>
效果如下
4、使用after伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动-使用after伪元素</title>
<style>
.box {
border: 1px solid #FF6700;
}
.one {
width: 100px;
height: 100px;
background-color: coral;
float: left;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
float: left;
}
.three {
width: 500px;
height: 100px;
background-color: cornflowerblue;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="one">盒子一</div>
<div class="two">盒子二</div>
</div>
<div class="three">盒子三</div>
</body>
</html>
效果如下
5、使用after和before伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动-使用after和before伪元素</title>
<style>
.box {
border: 1px solid #FF6700;
}
.one {
width: 100px;
height: 100px;
background-color: coral;
float: left;
}
.two {
width: 150px;
height: 150px;
background-color: aqua;
float: left;
}
.three {
width: 500px;
height: 100px;
background-color: cornflowerblue;
}
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="one">盒子一</div>
<div class="two">盒子二</div>
</div>
<div class="three">盒子三</div>
</body>
</html>
效果如下
以上就是清楚浮动的常用方法。