DIV左右浮动后父元素高度消失

yonglan

先看代码：

1. <div style="background:#6592E1;">
   
2. <div style="float:left; background:#E9CACA; width:300px; height:100px;">
   
3. </div>
   
4. <div style="float:right; background:#cccccc;  width:300px; height:100px;">
   
5. </div>
   
6. </div>

复制代码

当div子元素左右浮动时候，很奇怪，并没有看见最外面的div蓝色背景色。也就是高度消失了 并没有随着子元素变大。
解决办法：
定义css如下
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
最外面的div加 class="clearfix"，那么就会随着子元素的高度而增加。不会导致错位等问题。