寫前端頁面時經(jīng)常用到元素浮動，float:left||float:right; 元素浮動后空間釋放，使得頁面達(dá)不到理想效果，想要解決此類問題，總結(jié)了幾種方法，如下：

例子中html結(jié)構(gòu)為：

<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. 直接給父元素添加高度(高度根據(jù)需求設(shè)置)

.father{
height:100px;
}

4. 在浮動元素后面加一個空的div(沒有任何內(nèi)容),設(shè)置div css屬性 clear:fix；
5. 添加一個偽類，另其class="clearfix" ,這種方式可以多次使用，較推薦

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