浮动塌陷是因浮动元素脱离文档流致父容器高度为0；推荐用overflow:hidden触发BFC解决，但需防溢出裁剪；clear应加在后续兄弟元素上；现代布局优先用Flexbox或Grid。
浮动元素撑不开父容器，内容跑出边界
这是最典型的浮动塌陷现象：父元素高度为 0，子元素 float: left 或 float: right 后“飘”在父容器外，下面的兄弟元素直接顶上来，视觉上错位。
根本原因不是浮动本身“错”，而是浮动元素脱离文档流，父容器无法感知其尺寸。别急着加 clear，先看场景：
- 导航栏用浮动排按钮，但包裹它的
.nav高度塌了，背景色消失 - 图文混排时，文字环绕图片后，下一段落从图片底部开始，而非父块底部
推荐优先用 overflow: hidden（或 overflow: auto）给父容器——它会触发 BFC（块级格式化上下文），自动包含浮动子元素。比加空标签或伪元素更干净。
注意：overflow: hidden 会裁剪溢出内容（比如绝对定位子元素超出父边界），如果页面有 tooltip、下拉菜单等，得换方案。
立即学习“前端免费学习笔记（深入）”；
clear 属性该加在谁身上？加在哪一行？
clear 不是“清除浮动”，而是“让当前元素避开上方浮动元素”。很多人误加在浮动元素自己身上，完全无效。
正确做法是：加在需要“回到正常流底部”的那个**后续兄弟元素**上。比如浮动的 .sidebar 和 .main 并列，想让 .main 不被挤到右边，就给它加 clear: both。
-
clear: left→ 避开左边浮动元素 -
clear: right→ 避开右边浮动元素 -
clear: both→ 两边都避开（最常用）
常见错误：在浮动元素末尾加 <div style="clear:both"></div>。能用，但冗余；现代项目更倾向用伪元素：::after { content:""; display:table; clear:both; } —— 语义清、无 DOM 污染。
Flexbox 或 Grid 能替代 float 布局吗？
能，而且应该优先考虑。CSS 浮动本意是文字环绕图片（float: left on <img alt="css浮动元素导致内容错位怎么办_使用clear或overflow hidden调整布局" >），不是做整页布局。拿它做多列布局，本质是 hack。
用 display: flex 替代浮动导航栏，代码更直白：
nav { display: flex; }
nav a { flex: 1; }
用 display: grid 做两栏布局，不用管浮动方向和清除逻辑：
.container { display: grid; grid-template-columns: 200px 1fr; }
兼容性注意：IE10+ 支持 Flexbox，IE11+ 支持 Grid（但部分特性不全）。如果必须支持 IE9 及以下，才真得退回浮动 + clear 方案。
overflow: hidden 导致滚动条意外消失
加了 overflow: hidden 后，父容器里明明有内容溢出，却看不到滚动条，甚至内部 position: absolute 的弹层被截断——这不是 bug，是预期行为。
这时候不能硬扛，得换触发 BFC 的方式：
- 用
display: flow-root（Chrome 64+/Firefox 68+/Safari 15.4+ 支持）—— 专为解决此问题而生，无副作用 - 用伪元素
::after清除浮动（兼容性最好） - 改用
display: flex或display: grid父容器（一劳永逸）
老项目里搜 overflow: hidden，尤其出现在 .wrapper、.container 这类通用类名上，十有八九是为清浮动临时加的，现在值得花五分钟重构掉。
