为什么要清除浮动

元素浮动后会脱离标准流，此时不会影响块级元素的布局，此时标准流会当作浮动元素不存在，所以当包含浮动元素的包含框小于浮动元素的时候，就会出现高度塌陷，所以需要解决高度塌陷问题。

如何清除浮动

方法一：给父元素加上.clearfix

.clearfix:after{
    content:"";
    display:block; /* 或 table */
    clear:both;
}
.claerfix{
    zoom:1; /* IE兼容 */
}

<div class="father-box clearfix">
    <div class="float-box">1</div>
    <div class="float-box">2</div>
    <div class="float-box">3</div>
</div>

方法二: 给父元素加上overflow:hidden

<div class="father-box">
    <div class="float-box">1</div>
    <div class="float-box">2</div>
    <div class="float-box">3</div>
</div>

father-box{
    oerflow:hidden;
    }

方法三：新子元素尾部的新元素添加上clear:both

<div class="father-box">
    <div class="float-box">1</div>
    <div class="float-box">2</div>
    <div class="float-box">3</div>
    <div class="clear"></div>
</div>

.clear{
    clear:both
}