父容器高度为0但子元素可见，根本原因是HTML非法嵌套导致浏览器重写DOM结构，如<p>内嵌<div>会使<p>被提前闭合，子元素实际脱离父容器；应通过Elements面板检查真实DOM树，修正语义错误嵌套、漏闭标签等问题，而非依赖CSS补丁。
父容器高度为0但子元素可见，先查DOM结构是否被浏览器重写
这不是浮动的问题，而是HTML嵌套非法导致的解析崩坏。比如在<p>里直接塞<div>，浏览器会立刻关闭<p>，把<div>扔到外面——父容器实际已空，自然高度为0。
用开发者工具的 Elements 面板看真实 DOM 树，不是源码；重点检查：是否用了语义错误的嵌套、是否漏闭标签、是否在<table>里乱放<div>。这类问题比浮动更隐蔽，且overflow: hidden或::after完全无效。
- 临时加
* { outline: 1px solid red !important; }，快速识别“本该在容器内却飘在外面”的元素 - 右键“检查”后，在 Elements 面板中逐级展开父容器，确认子节点是否真的在它内部
- 若发现结构错位，优先修正 HTML，而不是堆 CSS 补丁
float:left 后父容器塌陷，别只靠 overflow:hidden 硬撑
overflow: hidden确实能触发 BFC 让父容器重新包含浮动子项，但它本质是裁剪溢出——只要子元素有position: absolute偏移、transform位移、下拉菜单弹出，就会被无声截断。
尤其在移动端 Safari 旧版本中，overflow: hidden触发 BFC 不稳定；若父容器本身需滚动，它还会直接禁用滚动条。
立即学习“前端免费学习笔记（深入）”；
- 优先用
display: flow-root：一行生效，不裁剪，无副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 - 兼容 IE8–11？改用
overflow: auto，滚动条仅在必要时出现，比hidden更安全 - 绝对不要给父容器同时设
overflow: hidden和clear: both，后者冗余且误导排查方向
clearfix伪元素清除法，三处细节错一个就失效
很多人复制的.clearfix::after规则看着像，但实际不生效，常见于三个硬伤：
-
content: ""缺失：伪元素没内容，渲染引擎直接忽略整条规则 -
display不是block或table：默认inline，clear: both对它不起作用 - 选择器写成
.clearfix:after（单冒号）：IE8 支持，但现代标准必须双冒号::after，否则部分浏览器不认
可靠写法：
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}IE8 及以下才需额外加*zoom: 1，2026 年新项目可忽略。
还在用 float 布局？先确认你真需要它
浮动不是布局工具，是文本环绕机制。现代三栏、图文混排、响应式网格，display: flex或display: grid天然规避塌陷，代码更短、逻辑更直。
唯一合理保留float的场景只剩两个：邮件模板（Outlook 强制兼容）、CSS Shapes 文字绕图（shape-outside依赖浮动锚点）。其他情况硬用 float，等于主动给自己埋坑。
- Flex 容器里设
float: left？它会被忽略，且可能干扰justify-content行为 - Grid 容器中浮动元素自动退化为普通块，
clear和clearfix全部失效 - 若 CMS 输出不可控 HTML，与其修浮动，不如用
contain: layout隔离渲染上下文
真正难处理的，从来不是“怎么清浮动”，而是没意识到：你正在调试的，是一段本不该存在的代码。
