.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;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。
