什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷。 高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐使用。 方法二:给父元素添加属性 overflow: hidden; 优点:浏览器支持好,简单; 缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。 方法三:在子元素的末尾添加一个空的 div ,并设置下方样式 div{ clear: both; height: 0; overflow: hidden; } 优点:所有浏览器都支持,并且容器溢出不会