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;}