.parent{
    border:1px solid red;
    background:yellow;
    width:400px;
}
.child{
    border:1px solid blue;
    background:white;
    width:180px;
    height:100px;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
<div class="parent">
    <div class="child fl">left浮動</div>
    <div class="child fr">right浮動</div>
</div>

給父級元素設(shè)置高度

.parent{
    border:1px solid red;
    background:yellow;
    width:400px;
    height:102px;
}

在底部添加一個空元素，清除浮動

<div class="parent">
    <div class="child fl">left浮動</div>
    <div class="child fr">right浮動</div>
    <div class="clear"></div>
</div>
.clear{
    clear:both;
}

父級div定義 overflow:hidden或者auto

.parent{
    border:1px solid red;
    background:yellow;
    width:400px;
    overflow:hidden;
}

• 為什么加入overflow:hidden即可清除浮動呢？那是因為overflow:hidden屬性相當(dāng)于是讓父級緊貼內(nèi)容，這樣即可緊貼其對象內(nèi)內(nèi)容（包括使用float的div盒子），從而實現(xiàn)了清除浮動。

據(jù)說是最高大上的方法 :after 方法

（注意：作用于浮動元素的父親）

.parent {
    zoom:1;
}    /*==for IE6/7 Maxthon2==*/
.parent :after {
    clear:both;
    content:'.';
    display:block;
    width: 0;
    height: 0;
    visibility:hidden;
}   /*==for FF/chrome/opera/IE8==*/

**最后：但不是不重要，也不是不知道！ **
下一標(biāo)簽直接清浮動兄弟標(biāo)簽浮動時，在下一標(biāo)簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標(biāo)簽的浮動而不用加入空標(biāo)簽來清除浮動。