布局高度塌陷是父容器无法感知浮动子元素高度而收缩，解决关键是让父容器正确包含浮动子项；推荐用伪元素.clearfix::after清除浮动，兼容性好且无副作用。
布局高度塌陷本质是父容器无法感知浮动子元素的高度，从而“收缩”到零或最小高度，造成后续元素上移、背景消失、边框不包裹内容等问题。解决核心是让父容器重新包含浮动子项——不是强行加高，而是让浏览器正确计算高度。
用伪元素 ::after 清除浮动（推荐）
这是当前最通用、无副作用的方案，兼容现代浏览器及 IE8+（配合 zoom 可支持 IE6/7）：
- 给父容器添加一个类名，比如 clearfix
- 在 CSS 中写：
.clearfix::after {
content: "";
display: block;
clear: both;
} - IE6/7 需额外加 .clearfix { zoom: 1; } 触发 hasLayout
触发 BFC 让父容器自包裹浮动
BFC（块级格式化上下文）能让容器独立计算内部布局，天然包含浮动子元素。只需满足任一条件即可：
- overflow: hidden | auto | scroll（最常用，注意慎用 hidden 可能裁剪溢出内容）
- display: flex | grid | inline-block | table-cell
- float: left | right（父元素自己浮动，但会脱离文档流，慎用）
- position: absolute | fixed（同样脱离文档流，一般不用于此目的）
临时补救：加空标签清除浮动
适合快速验证或老旧项目，但污染 HTML 结构：
- 在父容器末尾插入：<div style="clear: both"></div>
- 或使用语义更轻的 <br clear="both">
- 注意：该元素必须是块级且未浮动，才能强制下推并撑开父高
避免踩坑的细节提醒
清除浮动不只是加样式，还要注意这些实际影响：
- 浮动元素不再响应 margin: auto，居中需改用 flex 或 text-align
- clear 是作用在“自身”上的属性，意思是“我不要被前面的浮动顶开”，所以要加在需要下推的元素上
- 如果父容器已有 overflow: visible（默认值），直接设 hidden 最简；若需保留滚动或溢出效果，优先选伪元素法
- 多个浮动子项混排时，clear: both 比 left/right 更稳妥，避免遗漏方向
