css 如何清除浮动

方法一: 

给父元素加上.clearfix 这个类，这类似于给父元素加上了一个空的子标签，然后使用clear:both清除浮动，如下，使用了:after伪类元素

.clearfix:after{
    content: '';
    display: block; // 或者table
    clear: both;
}
.clearfix{
    zoom: 1; // ie兼容
}

方法二:

还是给父元素加上.clearfix类，然后使用:before 和:after双伪类选择器

.clearfix:after,.clearfix:before{
    content；'';
    display: block; // 前两行为伪类选择器都需要写的
    clear: both; // 主要这行清除浮动
}
.clearfix{
    zoom: 1; // ie兼容
}

方法三:

给父元素加上overflow:hidden

缺点: 若是有定位到父盒子之外的元素，会被隐藏

方法四:

给浮动的标签增加一个空的兄弟标签，并加入clear:both的样式来清除浮动（不推荐）

<div>
    <div style="float: left">哈哈哈</div>
    <div style="float: left">你好哈</div>
    <div style="clear: both"></div>  //这是一个空的标签，专门来清除浮动

</div>