清除浮动(高度塌陷问题)
对于一个盒子,如果它的父类没有设置高度,但是它被设置浮动,那么父盒子会有高度塌陷的问题。清除浮动目的是让父盒子自动的适应子盒子的最大高度。
1)父类盒子写overflow:hidden;
2)w3c提供的一种方式:内墙法。
.inner-box {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.clearfix {
clear: both;
}
<div class="outer-box">
<div class="inner-bot"></div>
<div class="clearfix"></div>
</div>
3)其他优秀的处理方式。大厂用的
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}