<style type="text/css">
.d1{ width:100%; border:1px solid red;}
.d2{ float:left; width:30%; height:20px; border:1px solid blue;}
</style>
<body >
<div class="d1 clearfix">
<div class="d2">彩色</div>
<div class="d2">出色</div>
</div>
如想外部div容器自适应高度，被里面的容器撑开；在遇到里面的容器float时，则外部不能有效地撑开。
之前的做法即在里面的容器下面加上<div style="clear:both"></div>清除浮动即可，但这回多出一个没有实际意义的div容器。
现一个新的做法：用clearfix:after消除 css浮动
在加一段样式：
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
*html .clearfix{ height:1%; }
应用ok。