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>

 

 

 由于浮动元素不占有原来的文档流的位置，因此会对后面的元素的布局产生影响。

（2）需要清除浮动的情况

父级没有高度

子盒子浮动了

影响下面的布局了

 

2、浮动的清除

（1）属性值（clear）

right：清除左侧有浮动的元素

left：清除右侧有浮动的元素

both：左右侧都清除

（2）额外标签法：

也称为隔墙法，会在浮动元素的末尾添加一个空标签（必须是块元素），例如：<div></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>

 

 

 此时，父盒子的高度会随子盒子的多少而改变，并且不会影响后面的布局。

（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>

 

 

 （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>

 

 

 （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>

 

1.《CSS：清除浮动（额外标签法、父级添加overflow、伪元素法、双伪元素法）》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《CSS：清除浮动（额外标签法、父级添加overflow、伪元素法、双伪元素法）》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/26520.html