父元素因为子级元素浮动而引起的内部高度为0。
我们没有给父元素设置高度
<div class="par">
<div class="child1">浮动一</div>
<div class="child2">浮动二</div>
</div>
<div class="btm">下面的盒子</div>
当我们此时给浮动一和浮动二加上浮动之后
方法一:给父元素设置overflow:hidden
.par {
/* 方法一 */
overflow: hidden;
width: 300px;
border: 1px solid red;
}
原理:通过触发BFC来清除浮动
缺点:当内容增多的时候容易造成不会自动换行导致内容被隐藏掉
方法二:给父元素display:inline-block
.par {
/* 方法一 */
/* overflow: hidden; */
/* 方法二 */
display: inline-block;
width: 300px;
border: 1px solid red;
}
方法三:在最后浮动元素后面额外加一个
在ie6-7不支持伪元素,使用*zoom:1;
<div class="par">
<div class="child1">浮动一</div>
<div class="child2">浮动二</div>
<div class="clear"></div>
</div>
<div class="btm">下面的盒子</div>
.clear {
clear: both;
}
方法四:使用after伪元素
<div class="par clear">
<div class="child1">浮动一</div>
<div class="child2">浮动二</div>
</div>
<div class="btm">下面的盒子</div>
/* 方法四,推荐使用的 */
.clear:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}