目录
高度塌陷
解决高度塌陷的方法
由于前面将高度塌陷和外边距重叠搞混，现在重新写一下高度塌陷
高度塌陷
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度， 导致父元素的高度塌陷。 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
解决高度塌陷的方法
1.所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出 现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
2.可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以 撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度， 基本没有副作用。 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。 clear属性取值: none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动) left: 不要找前面的左浮动元素 right: 不要找前面的右浮动元素 both: 不要找前面的左浮动元素和右浮动元素
.clear{
clear: both;
}3.通过after伪类 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个 div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使 用的方式，几乎没有副作用。
.parent:nth-child(2)::after{
content: "";
display: block;
clear: both;
}4.给父元素开启bfc
BFC详情见什么是外边距塌陷以及BFC是什么？（12）_学前端的狗头苏丹的博客-CSDN博客
