css 高度塌陷的解决办法

一、为什么会出现高度塌陷

父元素高度自适应，子元素浮动，只要子元素脱离了文档流后，造成父元素高度为0，称为高度塌陷问题。那么为什么会出先高度塌陷问题呢？

二、解决高度塌陷

2.1 给父元素一个固定的高度

最简单粗暴的解决方式就是给父容器一个固定的高度。
推荐指数：☆

缺点：
给父元素固定高度，就不能进行高度自适应，不够灵活，不推荐使用

css代码：

<div class='parent'>
	<div class='child'></div>
</div>

.child{
	float:left;
}
.parent{
	height:100px;
}

2.2 父元素也浮动

推荐指数：☆

缺点： 虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响。

css代码：

<div class='parent'>
	<div class='child'></div>
</div>
 
.child{
	float:left;
}
.parent{
	float:left;
}

2.3 给父元素添加属性 overflow: hidden;zoom:1;

推荐指数：☆ ☆

优点： 浏览器支持好，简单；
缺点： 要是子元素要margin负值定位或是负的绝对定位，会被裁掉，所以此方法是有不小的局限性的。

css代码：

<div class='parent'>
	<div class='child'></div>
</div>
 
.child{
	float:left;
}
.parent{
	overflow:hidden;
	zoom:1;
}

2.4 在浮动元素后添加一个div

推荐指数：☆ ☆ ☆

优点： 代码量少 容易掌握 简单易懂
缺点： 添加了无意义标签，不易于后期维护，违背了结构和表现分离的标准

css代码：

<div class='parent'>
	<div class='child'></div>
	<div class='clearBox'></div>
</div>
 
.child{
	float:left;
}
.clearBox{
	clear:both;
}

2.5 万能清除浮动法

在父元素中内容的最后添加一个伪元素来实现第三种方案的功能
推荐指数：☆ ☆ ☆ ☆ ☆

优点： 不会造成代码冗余,不破坏文档结构，剩余代码性能优化，推荐使用。
缺点： 代码量多

<div class='parent'>
	<div class='child'></div> 
</div>
 
.child{
	float:left;
}
.parent:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}