现象当父元素的所有子元素都设置了浮动float而父元素没有设置固定高度时父元素的高度会变为 0就像“塌陷”了一样。html //效果父元素背景看不见边框缩成一条线高度为 0。style.content{height:200px;width:45%;display:inline-block;margin-bottom:40px;margin-right:2%;}.parent{background:lightblue;/* 父元素背景 */border:2px solid blue;}.child{float:left;/* 子元素浮动 */width:100px;height:100px;background:coral;margin:10px;}/* 清除浮动方案clearfix经典实现 */.clearfix::after{content:;display:table;clear:both;}/styledivclasscontentdivclassparentdivclasschild1-1/divdivclasschild1-2/div/div/divdivclasscontentdivclassparent clearfixdivclasschild2-1/divdivclasschild2-2/div/div/div**为什么会发生高度塌陷**根本原因浮动元素脱离文档流。普通块级元素会主动撑开父元素浮动元素不再占据文档流空间父元素无法感知其高度父元素如果没有其他内容高度就变为 0正常情况 子元素(块级) → 撑开父元素浮动情况 子元素(浮动) → 脱离文档流 → 父元素高度归零解决方法清除浮动方法1父元素设置 overflow: hidden最简单原理触发 BFC块级格式化上下文让父元素包裹浮动元素。方法2使用 clear 属性的空元素不推荐缺点增加无意义的 HTML 结构。方法3伪元素清除浮动最推荐优点纯 CSS 方案不污染 HTML兼容性好。方法4父元素也浮动不推荐缺点会引入新的布局问题。方法5父元素设置固定高度不灵活虽然“塌陷”通常指浮动高度塌陷但类似情况还有1. 外边距塌陷Margin Collapse现象相邻块级元素的上下外边距会合并取较大值。.box1{margin-bottom:30px;}.box2{margin-top:20px;}/* 实际间距 30px而不是 50px */解决方法给其中一个父元素设置 overflow: hidden设置 display: inline-block设置 padding 或 border 隔开使用 Flexbox/Grid 布局没有此问题2.绝对定位塌陷现象position: absolute 元素脱离文档流父元素高度塌陷。解决方法父元素设置相对高度或使用 JS 计算。