overflow ：hidden 和 clear：both 與 clearfix撐起高度坍塌的父元素應用

overflow ：hidden 和 clear：both防止父元素塌陷的應用

二者都可以應用于清除浮動，将包含有float元素的高度坍塌的父元素高度撐起來；

（1）overflow：hidden：

隻要在父元素裡面設定：overflow ：hidden 即可：

原理:

因為overflow屬性（除了應用visible），對于scroll hidden auto 都會對當中的 float ，position：absolute，inline-block等浮動元素塊級格式化，相當于塊元素，此時相比原來的浮動元素對于父元素高度坍塌問題就不存在了。

（2）both：clear

在父元素裡面設定一個與浮動元素同級的div子元素，然後設定

clear：both，

display: block;

visibility: none;

height: 1px；

原理：在float浮動元素下面存在的塊元素，兩邊不能有浮動元素，自然撐開了父元素的高度

（3）

添加clearfix類

.clearfix：after

{

visible:hidden;

display:block;

content: ". ";

clear:both;

font-size:0;

height:0;

}

//為ie6準備。

.clearfix{zoom: 1;}