.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>

#给父级元素设置高度

.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属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

#据说是最高大上的方法 :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==*/

最后：但不是不重要，也不是不知道！ 

下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。