1、清除浮动的原因
(1)不清除浮动的情况:
由于父级的子元素不方便给高度(不给高度的时候父盒子的大小由里面包含的子盒子来决定),但是,子元素为浮动的又不占有位置,导致父级的盒子高度为0的时候就会影响下面的标准流的盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.bigbox {
background-color: #ffffcc;
width: 1100px;
margin: 0 auto;
}
.left{
height: 400px;
width: 200px;
float: left;
background-color: blanchedalmond;
}
.right{
height: 400px;
width: 600px;
float: right;
background-color: #e3dc89;
}
.test{
height: 100px;
width: 1000px;
margin: 0 auto;
background-color: black;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
</div>
<div class="test">
</div>
</body>
</html>
![c456b9272b1e4f3988c759e6c2cdf212.png](https://i-blog.csdnimg.cn/blog_migrate/d99740897e1a7ef2c06e9f57a7631df2.png)
由于浮动元素不占有原来的文档流的位置,因此会对后面的元素的布局产生影响。
(2)需要清除浮动的情况
父级没有高度
子盒子浮动了
影响下面的布局了
2、浮动的清除
(1)属性值(clear)
right:清除左侧有浮动的元素
left:清除右侧有浮动的元素
both:左右侧都清除
(2)额外标签法:
也称为隔墙法,会在浮动元素的末尾添加一个空标签(必须是块元素),例如:<div style="clear: both"></div>或者其他标签,例如:<br>等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.bigbox {
background-color: #ffffcc;
width: 1100px;
margin: 0 auto;
}
.left{
height: 400px;
width: 200px;
float: left;
background-color: blanchedalmond;
}
.right{
height: 400px;
width: 600px;
float: right;
background-color: #e3dc89;
}
.test{
height: 100px;
width: 1000px;
margin: 0 auto;
background-color: black;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="clear">
</div>
</div>
<div class="test"></div>
</body>
</html>
![dff998bd26b969c6bc6e553a8fd91723.png](https://i-blog.csdnimg.cn/blog_migrate/4d6472e1c55e08250860a98a9b0c50e0.png)
此时,父盒子的高度会随子盒子的多少而改变,并且不会影响后面的布局。
(3)父级添加(添加overflow)
可以给父级元素添加overflow属性,将其属性值设置为hidden、auto或scroll
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.bigbox {
overflow: hidden;
background-color: #ffffcc;
width: 1100px;
margin: 0 auto;
}
.left{
height: 400px;
width: 200px;
float: left;
background-color: blanchedalmond;
}
.right{
height: 400px;
width: 600px;
float: right;
background-color: #e3dc89;
}
.test{
height: 100px;
width: 1000px;
margin: 0 auto;
background-color: black;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
</div>
<div class="test"></div>
</body>
</html>
![e599c0de3c07d586a12fab272077316a.png](https://i-blog.csdnimg.cn/blog_migrate/813d08a2660266ba28c16e36eb8a61bf.png)
(4)伪元素法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.bigbox {
background-color: #ffffcc;
width: 1100px;
margin: 0 auto;
}
.left{
height: 400px;
width: 200px;
float: left;
background-color: blanchedalmond;
}
.right{
height: 400px;
width: 600px;
float: right;
background-color: #e3dc89;
}
.test{
height: 100px;
width: 1000px;
margin: 0 auto;
background-color: black;
}
.clearfix:after{
content: "";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix{/*IE67专有*/
*zoom: 1;
}
</style>
</head>
<body>
<div class="bigbox clearfix">
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
</div>
<div class="test"></div>
</body>
</html>
![be264e9ea215e888e0f64da39a7da1d8.png](https://i-blog.csdnimg.cn/blog_migrate/e02b8dccee190db1321a96a1c8a8ce05.png)
(5)双伪元素清除浮动(使用了before和after来清除浮动):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.bigbox {
background-color: #ffffcc;
width: 1100px;
margin: 0 auto;
}
.left{
height: 400px;
width: 200px;
float: left;
background-color: blanchedalmond;
}
.right{
height: 400px;
width: 600px;
float: right;
background-color: #e3dc89;
}
.test{
height: 100px;
width: 1000px;
margin: 0 auto;
background-color: black;
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
</style>
</head>
<body>
<div class="bigbox clearfix">
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
<div class="left">子元素</div>
</div>
<div class="test"></div>
</body>
</html>
原文链接:CSS:清除浮动(额外标签法、父级添加overflow、伪元素法、双伪元素法) - 怀梦想,致远方 - 博客园
作者:怀梦想,致远方