HTML css解决高度塌陷的方法

高度塌陷是HTMl中常见的问题，今天简单的整理一下几种方法来解决高度塌陷。

什么是高度塌陷：在文档流中，父元素的高度默认是被子元素撑开的也就是子元素多高父元素就多高，但为子元素设置浮动以后，子元素会完全脱离文档流此时将导致子元素无法撑起父元素高度，导致父元素塌陷，父元素下的元素都会向上移动 会导致布局变乱。
例：先设置3个如下div

<div class="box1">
		<div class="box2"></div>
</div>
<div class="box3"></div>

分别给他们不同的css样式

.box1{border: 10px red solid;}
.box2{width: 100px;height: 100px;background-color: blue;}
.box3{height: 100px;background-color: yellow;}

父元素box1不给高度，默认被box2撑开

但是当给box2设置浮动以后，它会完全脱离文档流，这将导致它无法把父元素撑起来，从而导致父元素box1高度塌陷，而父元素box1下面的box3会向上移动，布局就会出现以下效果。

如何解决高度塌陷：
1.可以固定父元素的高度去解决（在特定的时候才用，加了固定高度后，就不能高度自适应了）
2.给父元素设置overflow：hidden；它可以解决高度塌陷并实现高度自适应，但是只要子元素 内容超出父元素外，就会被隐藏。
3.在浮动元素下方添加一个空元素

<div class="clear"></div>

并给它设置属性 .clear{clear: both;} 清除浮动元素的影响
4.给父元素添加display：table；让父元素转换元素类型和表格一样，弊端是这样会改变当前元素的类型。
5.通过after伪类选中box1后边

.box1:after{    content: "";/*添加内容*/
                display: block;/*转换一个块元素*/
				clear: both;
				height: 0;    /*后面的是为了兼容其他的浏览器*/
				overflow: hidden;
                visibility: hidden;
			}