清除浮动主要是为了防止父元素塌陷。清除浮动的方法有很多,常用的是 clearfix 伪类。
方法一:clearfix
<div class="outer clearfix">
<div class="inner">inner</div>
</div>
.outer{
background: blue;
}
.inner{
width: 100px;
height: 100px;
background: red;
float: left;
}
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
方法二:额外加一个div,clear:both
<div class="container">
<div class="inner"></div>
<div class="clear"></div>
</div>
.container{
background: blue;
}
.inner {
width: 100px;
height: 100px;
background: red;
float: left;
}
.clear{
clear:both;
}
方法三:触发父盒子BFC,overflow:hidden
<div class="outer">
<div class="inner">inner</div>
</div>
.outer{
background: blue;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
background: red;
float: left;
}