CSS清除浮动的几种方法
问题是怎么产生的
由代码和图可见，父盒子并没有设置高度，他的的高度是由子盒子撑出来的。
#father{
background-color: #ccc;
width: 500px;
text-align: center;
}
#son1{
background: pink;
width: 100px;
height: 100px;
}
#son2{
background-color: blue;
width: 100px;
height: 100px;
}
<div id="father">
<div id="son1">1</div>
<div id="son2">2</div>
</div>
当我们为两个子盒子1和2设置浮动时，左浮或者右浮，就会出现如图的问题（父盒子塌陷）。
#son1{
background: pink;
width: 100px;
height: 100px;
float: left;
}
#son2{
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
此时就要清除浮动
方法1（添加额外添加空标签清除浮动，浪费资源）
<style>
#father{
background-color: #ccc;
width: 500px;
text-align: center;
}
#son1{
background: pink;
width: 100px;
height: 100px;
float: left;
}
#son2{
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
#extra{
clear: both;
/* clear: left; 清除左浮*/
/* clear: right; 清除右浮*/
/* both 左右都有用 */
}
</style>
<body>
<div id="father">
<div id="son1">1</div>
<div id="son2">2</div>
<div id="extra">我是额外添加的空标签来清除浮动的</div>
</div>
</body>
方法2 （触动bfc清除浮动，会遮挡内容）
在父元素添加
overflow: hidden;
完整代码
<style>
#father{
background-color: #ccc;
width: 500px;
text-align: center;
overflow: hidden;
}
#son1{
background: pink;
width: 100px;
height: 100px;
float: left;
}
#son2{
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
</style>
<body>
<div id="father">
<div id="son1">1</div>
<div id="son2">2</div>
</div>
</body>方法3 （利用伪元素，推荐使用）
在父元素添加一个类
.clearfix::after{
content: "";
display: block;
clear: both;
}完整代码
#father{
background-color: #ccc;
width: 500px;
text-align: center;
}
#son1{
background: pink;
width: 100px;
height: 100px;
float: left;
}
#son2{
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
<body>
<div id="father" class="clearfix">
<div id="son1">1</div>
<div id="son2">2</div>
</div>
</body>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
