解决元素浮动空间释放问题的几种方法

写前端页面时经常用到元素浮动，float:left||float:right; 元素浮动后空间释放，使得页面达不到理想效果，想要解决此类问题，总结了几种方法，如下：

例子中html结构为：

<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>

css 为：

.child1{
  float:left;
  width:100px;
  height:100px;
}
.child2{
  float:right;
   width:100px;
  height:100px;
}

1. 给浮动元素的父元素加css样式：overflow：hidden

.father{
overflow:hidden;
}

2. 让浮动元素的父元素也float

.father{
float:left;
}

3. 直接给父元素添加高度(高度根据需求设置)

.father{
height:100px;
}

4. 在浮动元素后面加一个空的div(没有任何内容),设置div css属性 clear:fix；
5. 添加一个伪类，另其class="clearfix" ,这种方式可以多次使用，较推荐

.clearfix:after{
content:"";
display:"block";
overflow:"hidden";
*zoom=1;
}