子元素float后撑起父元素的方法

1.给父元素也添加float

让父元素与子元素一起脱离文档流浮动起来可以让子元素在父元素内，这样父元素就能自适应子元素的高度，但是会影响父元素之后的元素排列，甚至影响布局。

2.给父元素一个固定高度

此方法适用于子元素高度已知并且固定的情况。

3.新建一个空的div

为这个div设置clear：both。

4.给父元素添加 overflow：hidden；

overflow：hidden表示隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观。当子元素浮动时，父元素会增加高度去包裹住子元素，这个高度是跟随子元素自适应的高度。

5.::after 伪类；

overflow：hidden表示隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观。当子元素浮动时，父元素会增加高度去包裹住子元素，这个高度是跟随子元素自适应的高度。

<div class="div">
    <div class="son">子元素</div>
</div>

.div {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮动*/
    display:block;/*确保该元素是一个块级元素*/
}