浮动导致父容器高度塌陷，解决方法有：①clearfix伪元素清除（推荐）；②overflow:hidden触发BFC（有裁剪风险）；③flex/grid布局替代浮动；④避免空标签清除及浮动元素宽高缺失问题。
浮动元素会脱离文档流，导致父容器无法正确计算高度，出现“高度塌陷”——即父元素高度变为0或小于预期，影响后续布局。解决的核心思路是让父容器“感知”到浮动子元素的存在。
使用clearfix清除浮动（推荐）
clearfix是一种经典的、语义清晰且兼容性好的方案，通过伪元素在父容器末尾插入并清除浮动。
- 给浮动元素的父容器添加一个类，如 .clearfix
- CSS中定义：
content: "";
display: table;
clear: both;
}
注意：IE8+ 支持 ::after，若需兼容 IE6–7，可用 :after 单冒号写法，并补充 zoom: 1 触发 hasLayout。
设置父容器 overflow: hidden（快捷但有风险）
给父容器设置 overflow: hidden 或 overflow: auto 可触发 BFC（块级格式化上下文），使容器包含浮动子元素。
立即学习“前端免费学习笔记（深入）”；
- 写法简单：.parent { overflow: hidden; }
- 但副作用明显：超出父容器的内容会被裁剪，比如下拉菜单、阴影、定位元素偏移等可能被隐藏
- 不适用于需要溢出展示的场景（如 tooltip、dropdown）
现代替代方案：flex 或 grid 布局
如果不需要兼容老浏览器，直接用 display: flex 或 display: grid 替代浮动布局，天然避免塌陷问题。
- .parent { display: flex; } —— 子项默认沿主轴排列，父容器自动包裹高度
- 浮动本身已不是布局首选，仅用于文字环绕等特定场景
其他注意事项
避免使用空标签（如 <div style="clear:both"></div>）清除浮动，污染 HTML 结构且不易维护。
- 确保浮动元素有明确的 width，否则在窄容器中可能换行破坏布局
- 检查是否误将 float 应用于行内元素（如 span），应先设为 display: block 或 inline-block
- 调试时可用浏览器开发者工具查看盒模型，确认父容器高度是否为0
