清除浮动

<div class="container">
    <h3 style="float: left;">我是一个浮动的元素</h3>
</div>
<div class="content">我是一个普通的P标签</div>

1. clear: both

对浮动元素后面的元素添加clear both，或者通过给一个:after伪元素添加。

.content{
    clear: both;
}

2. 父元素设置高度

给浮动元素的父元素设置固定的高度。

.container{
    height: 100px;
}

3. 父元素overflow

给浮动元素的父元素设置overflow: hidden / auto

.container{
    overflow: auto;        //or
    overflow: hidden;
}

如果子元素浮动后，父元素的高度无法由内容撑开，给父元素加上该属性后可以解决此问题。

父元素高度无法撑开.png

4.父元素设置display

属性值可以是flex、table-cell

.container{
    display: flex;            //or
    display: table-cell;
}