SOURCE

<!-- 一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，
导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。 
http://www.divcss5.com/jiqiao/j406.shtml-->

<div class="divcss5 clear1">
	<div class="divcss5-left">left浮动</div>
	<div class="divcss5-right">right浮动</div>

	<!-- 但会多加CSS和HTML标签。 -->
	<!-- <div class="clear">清除浮动2</div> -->
</div>

.divcss5 {
    width: 400px;
    border: 1px solid #F00;
    background: #FF0;
    /*方案1：加高度 */
    /* height: 102px;*/
    /* 推荐做法 */
    /* overflow: hidden; */
}


/* 方案3：不添加额外元素，使用伪元素清除浮动影响 */

.clear1:after,
.clear1:before {
    clear: both;
    display: block;
    content: "";
}

.clear {
    clear: both;
}

.divcss5-left,
.divcss5-right {
    width: 180px;
    height: 100px;
    border: 1px solid #00F;
    background: #FFF
}

.divcss5-left {
    float: left
}

.divcss5-right {
    float: right
}