css清除浮动的三种方法汇总
使用说明
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，使用了浮动的元素会造成父元素高度塌陷、会使紧随其后的行内元素围绕排列、会使紧随其后的块状元素被覆盖，所以为了避免以上情况，只要元素使用了浮动，就必须要清除浮动。
<div class="main">
<div class="mainLeft">200px*200px</div>
</div>
<!-- css -->
<style>
.main {
background-color: #ccc;
}
.mainLeft {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
float: left;
background-color: #ff0000;
}
</style>
浮动的元素
清除浮动后
以下将介绍清除浮动常用的三种方法：
方法一：给父元素添加overflow:hidden样式（不推荐）
<!-- css -->
<style>
.main {
background-color: #ccc;
overflow: hidden;
}
.mainLeft {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
float: left;
background-color: #ff0000;
}
</style>
方法二：在浮动元素后添加一个空元素， 并且CSS中设置 clear 属性即可清理浮动
<div class="main">
<div class="mainLeft">200px*200px</div>
<div class="mainBlack"></div>
</div>
<!-- css -->
<style>
.main {
background-color: #ccc;
}
.mainLeft {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
float: left;
background-color: #ff0000;
}
.mainBlack {
clear: both;
}
</style>
方法三：使用伪元素:after（推荐使用）
给使用了浮动元素的父级元素添加伪元素，再给伪元素给设置 clear 属性，一般这种方法是放在公共样式文件中使用，以后遇到需要清楚浮动的元素，直接添加对应的className即可
<div class="main clearfloat">
<div class="mainLeft">200px*200px</div>
<div class="mainBlack"></div>
</div>
<!-- css -->
<style>
.main {
background-color: #ccc;
}
.mainLeft {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
float: left;
background-color: #ff0000;
}
.clearfloat::after {
display: block;
width: 0;
height: 0;
content: "";
overflow: hidden;
clear: both;
}
</style>
以上是个人总结的经验，希望对大家有所帮助！