浮动导致父容器高度塌陷引发后续模块重叠，需用clearfix（::after+display:table+clear:both）清除；overflow:hidden有裁剪风险；现代推荐flex或grid布局。
浮动元素导致后续模块重叠的典型现象
当使用 float: left 或 float: right 布局多个块级元素时，如果父容器没有清除浮动，它的高度会塌陷为 0，导致紧随其后的模块（比如 <footer></footer> 或下一个 <section></section>）向上“爬升”，视觉上覆盖或紧贴在浮动内容下方——这不是 margin 问题，是父容器完全“看不见”子浮动元素造成的布局断裂。
clearfix 方案：兼容性最好且无需额外 HTML
给浮动元素的直接父容器添加一个通用清除类，不依赖伪元素以外的结构变动，IE8+ 全支持。
.clearfix::after {
content: "";
display: table;
clear: both;
}
<p>/<em> 使用时只需加 class </em>/
<div class="clearfix">
<div style="float: left">左栏</div>
<div style="float: right">右栏</div>
</div>-
::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。
