浮动元素仍占据原始文档流位置的空间，但后续普通流内容会绕行，导致视觉重叠；清除浮动应优先用overflow:hidden触发BFC或display:flow-root，而非仅依赖clear:both。
浮动元素真的不占文档流空间吗
不是。浮动元素仍占据原始位置的空间（触发BFC前），但后续普通流内容会绕行，视觉上“看不见”它占位——这是重叠的根源。
常见错误现象：float: left 的图片右侧文字向上爬、标题压在浮动块上、margin 失效、父容器高度塌陷后子元素溢出重叠。
关键判断点：用浏览器开发者工具选中浮动元素，看其 Layout 面板里的 Offset Top/Left 和 Containing Block，再对比其父容器的 Computed Height 是否为 0 或远小于预期。
清除浮动不等于“清空样式”
很多人加 clear: both 后发现没用，是因为它只对“紧邻的后续块级元素”生效，不解决父容器塌陷。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用
overflow: hidden或overflow: auto在父容器上触发BFC——简单、兼容性好（IE8+） - 避免用
<div style="clear:both"></div>这种冗余HTML，语义差且易漏写 - 现代项目可直接上
display: flow-root（Chrome 64+/Firefox 59+/Safari 15.4+），它是专为清除浮动设计的display值，不影响布局语义
注意：overflow: hidden 会裁剪溢出内容；display: flow-root 在旧版Safari中需检查是否支持。
文字环绕浮动块时的行高与基线问题
文字和浮动元素重叠，常不是因为定位错，而是行框（line box）被压缩或基线偏移导致。
典型场景：浮动图片 + 短段落文字，首行文字从图片底部“钻出来”，第二行却贴着图片右边缘向上顶，造成视觉重叠。
原因：float 元素参与行框构建，但不占据行高；若文字行高小、字体大，行框高度不足以容纳浮动块底部，就会挤压文字位置。
实操建议：
- 给浮动元素加
margin-bottom（如margin-bottom: 0.5em），为文字行框留出缓冲空间 - 避免对浮动元素设
vertical-align（它对float无效，还可能干扰理解） - 文字容器加
line-height: 1.6或更高，确保行框有足够高度包容浮动块的自然下沉
Flex/Grid 布局下还该用 float 吗
不该。只要父容器是 display: flex 或 display: grid，浮动声明会被忽略（规范明确：浮动在flex/grid容器的子元素上无效果）。
但容易踩的坑是：嵌套结构里外层用了Flex，内层某块又写了 float: right，结果既没浮动也没报错，文字却错位——因为浮动失效，元素退回到文档流，但尺寸/对齐没重设。
排查方法：在开发者工具中查看该元素的 Computed 样式，搜 float，如果显示 left 但实际没效果，大概率父容器是Flex/Grid。
此时应改用对应布局的原生能力：justify-content: flex-end、margin-left: auto 或 place-self: end 等。
浮动在响应式断点切换时尤其危险——同一class在不同媒体查询里可能被不同父布局包裹，行为不一致很难调试。
