浮动导致父容器高度塌陷引发后续模块重叠，需用clearfix（::after+display:table+clear:both）清除；overflow:hidden有裁剪风险；现代推荐flex或grid布局。
浮动元素导致后续模块重叠的典型现象
当使用 Float: left 或 float: right 布局多个块级元素时，如果父容器没有清除浮动，它的高度会塌陷为 0，导致紧随其后的模块（比如
或下一个
）向上“爬升”，视觉上覆盖或紧贴在浮动内容下方——这不是 margin 问题，是父容器完全“看不见”子浮动元素造成的布局断裂。
clearfix 方案：兼容性最好且无需额外 html
给浮动元素的直接父容器添加一个通用清除类，不依赖伪元素以外的结构变动，IE8+ 全支持。
.clearfix::after { content: ""; display: table; clear: both; } / 使用时只需加 class /
左栏 右栏 -
::after必须设display: table（或block），否则clear: both不生效 - 不要用
display: inline-block，它不会触发 BFC，也无法撑开父高 - 若需支持 IE6/7，可追加
*zoom: 1触发 hasLayout
overflow: hidden 的副作用要小心
给父容器设 overflow: hidden 确实能强制形成 BFC 并包裹浮动子元素，但容易引发意外裁剪：
- 子元素若有
position: absolute且超出父边界，会被隐藏 - 有横向滚动需求（如轮播图、长表格）时，内容被截断
- 配合
transform动画时，在某些 chrome 版本中可能触发渲染异常
仅当确认无溢出内容、且不需要滚动/定位越界时才考虑此方案。
立即学习“前端免费学习笔记（深入）”；
现代替代：flex 或 grid 布局彻底绕过浮动
如果目标浏览器支持（Chrome 29+/firefox 28+/safari 6.1+），直接放弃浮动更省心：
.container { display: flex; } .left { flex: 1; } .right { width: 200px; }- 无需清除，父容器自动包含子项高度
- 响应式控制更直观（
flex-wrap,gap） - 注意：旧版 Safari 对
flex的align-items解析有差异，建议加align-items: stretch显式声明
浮动不是必须的布局手段，重叠本质是清除机制没到位；但真正省事的做法，是让浮动只出现在需要文字环绕的场景里，其他布局交给 display: flex 或 display: grid。