因浮动使得容器失去高度的解决方法

因为设置了左右浮动，造成了外容器高度失效或者边距失效。

可以按如下方法解决。

1、给容器添加css：overflow:hidden;

2、容器本身也予以浮动。

3、在容器内最后追加清除浮动代码<div style="clear:both"></div>

4、利用after伪类。

例如

clearfix{zoom:1}

一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了：
<style type="text/css">
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{zoom:1}
.parent{width:120px;}
.left{float:left;display:inline;}
.right{float:right;display:inline;}
</style>

<div class="clearfix">
 <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
</div>

好文要顶