目录

高度塌陷

解决高度塌陷的方法

由于前面将高度塌陷和外边距重叠搞混，现在重新写一下高度塌陷

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度， 导致父元素的高度塌陷。 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱

解决高度塌陷的方法

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博客