清除浮动的方法

1）使用额外的标签clear:both
在浮动元素下面添加一个空标签，在这个标签中设置clear：both；
2）使用overflow：hidden属性
父元素定义overflow:hidden，此时，浏览器会自动检查浮动区域的高度；
3）使用伪元素:after清除浮动

.parent:after{
    // 定义元素前后的生成内容，这里是定义元素后的空内容
    content: '';
    display: block;
    clear: both;
}

 

在元素最后定义一个空的内容，然后让该空的内容来清除浮动；