高度塌陷问题详解

高度塌陷：

父元素的高度，默认被子元素撑开，目前来讲son多高，father就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素，导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动，导致整个页面的布局混乱！

例如，我们常常想要图一：

image.png

但是，输出的总是图二：

image.png

原理：
在w3c标准（非IE6以下版本采用的是W3C标准）中，每一个元素会有一个隐藏的属性，即BFC（块级格式化上下文），该属性在默认情况下是关闭的。

当BFC开启的时候回获得以下特性：

1.父级元素的内外边距不会与子元素重叠
2.开启后不会被浮动元素所覆盖
3.开启后可以包含浮动子元素

解决方法：

1.直接将父级元素的长宽写死
缺点：当子元素的大小发生改变时，父级元素不能够自适应

2.为父级元素设置浮动
一般出现高度塌陷大多是由于浮动引起的
缺点：当设置浮动后父级元素宽度会跟着发生改变

3.设置绝对定位

4.设置元素为inline-block

5.将overflow属性设置为hidden（推荐使用）
此方法相对于其他方式来说，副作用最小。

---

来源：CSDN
原文：https://blog.csdn.net/chenjuan1993/article/details/82825433