浮动导致父容器高度塌陷引发后续模块重叠，需用clearfix（::after+display:table+clear:both）清除；overflow:hidden有裁剪风险；现代推荐flex或grid布局。

浮动元素导致后续模块重叠的典型现象

当使用 float: left 或 float: right 布局多个块级元素时，如果父容器没有清除浮动，它的高度会塌陷为 0，导致紧随其后的模块（比如

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。