前言
清除浮动主要是为了解决，当父元素未设置高度，子元素使用了浮动(浮动元素会脱离标准流,不占位)，引起的内部高度为0，从而影响后续父同级标准流盒子布局的问题。
演示代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
</head>
<style>
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: #FFFF99;
}
.right {
float: right;
height: 300px;
width: 300px;
background-color: #CCCCFF;
}
.box {
height: 200px;
width: 800px;
margin: 0 auto;
background-color: #CCCCCC;
}
</style>
<body>
<div class="head">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>
效果图
方法一：额外标签法
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置
clear:both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
</head>
<style>
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: #FFFF99;
}
.right {
float: right;
height: 300px;
width: 300px;
background-color: #CCCCFF;
}
.box {
height: 200px;
width: 800px;
margin: 0 auto;
background-color: #CCCCCC;
}
.clearfix{
clear: both;
}
</style>
<body>
<div class="head">
<div class="left"></div>
<div class="right"></div>
<!--清除新标签-->
<div class="clearfix"></div>
</div>
<div class="box"></div>
</body>
</html>
方法二：单伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
</head>
<style>
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: #FFFF99;
}
.right {
float: right;
height: 300px;
width: 300px;
background-color: #CCCCFF;
}
.box {
height: 200px;
width: 800px;
margin: 0 auto;
background-color: #CCCCCC;
}
/*使用伪元素代替了html中的额外标签*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
<body>
<div class="head clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>
方法三：双伪元素清除法(推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
</head>
<style>
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: #FFFF99;
}
.right {
float: right;
height: 300px;
width: 300px;
background-color: #CCCCFF;
}
.box {
height: 200px;
width: 800px;
margin: 0 auto;
background-color: #CCCCCC;
}
/*使用伪元素代替了html中的额外标签,clearfix::before解决外边距塌陷问题*/
.clearfix::before, .clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
</style>
<body>
<div class="head clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>
此方法小米，淘宝的官网等目前都依然采用
方法四：给父元素添加overflow: hidden；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
</head>
<style>
.head {
width: 600px;
margin: 0 auto;
background-color: #FFCCCC;
overflow: hidden;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: #FFFF99;
}
.right {
float: right;
height: 300px;
width: 300px;
background-color: #CCCCFF;
}
.box {
height: 200px;
width: 800px;
margin: 0 auto;
background-color: #CCCCCC;
}
</style>
<body>
<div class="head">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>
最终效果
