CSS解决高度塌陷的方法

声明：本人才疏学浅，文中如有错误或不当之处，请各位指出，共同进步，谢谢！

一、什么是高度塌陷

当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。

比如下面的效果：

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

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

可以看到父元素高度塌陷后，下面的子元素都往上移动了，脱离了文档流。

二、解决高度塌陷的方法

方法一:

给父元素设置固定的高度，固定高度后，父元素的高度就无法自适应子元素的高度了。
弊端：但是不能让元素高度自适应了 。

.box1 {
   
		border: 10px red solid;
		height:100px;
		}

方法二：

给父元素设置overflow：hidden，解决高度塌陷并能实现高度自适应的方法ÿ