由于浮动元素不在占用原文档流的位置，所以会对后面的排版产生影响，因此需要在该元素中清除浮动。
清除浮动的本质是解决父级元素因为子级浮动引起内部高度为0的问题。
为何要清除浮动
如下，子盒子是标准流，父盒子虽然没有高度，但是会撑开父盒子的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
}
.father .son1 {
width: 100px;
height: 100px;
background-color: green;
}
.father .son2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son box</div>
<div class="son2">son box</div>
</div>
</body>
</html>
子盒子添加浮动，浮动不占用位置，因为父盒子没有高度，导致父盒子的高度为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
/*height: 100px;*/
}
.son1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1 box</div>
<div class="son2">son2 box</div>
</div>
</body>
</html>
因为父盒子的高度为0，会影响其它盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
}
.son1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.footer {
height: 120px;
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1 box</div>
<div class="son2">son2 box</div>
</div>
<div class="footer"></div>
</body>
</html>
如何清除浮动
- 额外标签法
- 父级添加overflow属性方法
- 使用after伪元素清除浮动
- 使用before和after双伪元素清除浮动
额外标签法
选择器 {clear: 属性值;}
| 属性值 | 说明 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧的浮动影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
额外标签法是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签，例如<div style="clear: both"></div>或其它br亦可。
- 优点：通俗易懂，书写方便
- 确定：添加许多无意义的标签，结构化较差。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
}
.son1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.footer {
height: 120px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1 box</div>
<div class="son2">son2 box</div>
<!--最有浮动标签后添加一个标签，清除浮动-->
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
父级添加overflow属性方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
overflow: hidden;
}
.son1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.footer {
height: 120px;
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1 box</div>
<div class="son2">son2 box</div>
</div>
<div class="footer"></div>
</body>
</html>
使用after伪元素清除浮动
**:after 方式
-
.clearfix:after {content: ""; display: block, height: 0; clear: both, visibility: hidden;}
-
.clearfix {*zoom: 1;} // IE6、7专有
-
优点： 复合闭合浮动思想，结构语义化正确
-
缺点：由于IE6-7不支持 :after,使用 zoom:1触发hasLayout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
}
.son1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.footer {
height: 120px;
background-color: black;
}
/*正常浏览器清除浮动*/
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*IE6-7清除浮动方式，*表示ie7以下的版本所识别*/
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son1">son1 box</div>
<div class="son2">son2 box</div>
</div>
<div class="footer"></div>
</body>
</html>
使用before和after双伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: cyan;
}
.son1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.footer {
height: 120px;
background-color: black;
}
.clearfix:after, .clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son1">son1 box</div>
<div class="son2">son2 box</div>
</div>
<div class="footer"></div>
</body>
</html>