加了display: flex仍不生效，是因为残留float、clear或overflow: hidden等旧指令与flex逻辑冲突；必须彻底清理这些属性，并正确指定flex容器层级和子项flex规则。
直接删掉所有 float、clear 和 overflow: hidden（曾用于清浮动）——不是“加了 display: flex 就自动切换”，而是必须清理旧指令，否则子项仍按浮动逻辑参与渲染，导致错位或塌陷。
为什么加了 display: flex 还是不生效
常见错误现象：flex-direction: row 下子元素堆成一列、高度莫名塌陷、间距错乱。根本原因不是 flex 写错了，而是父容器还挂着 overflow: hidden（曾用来清除浮动），它会截断 flex 子项的伸缩行为；或者子元素上残留 float: left，而浏览器在 flex 容器中会先处理 float 再尝试 flex，结果不可控。
-
float和clear必须全部删掉——它们与 flex 逻辑冲突，浏览器规范明确要求忽略 -
overflow: hidden不是 flex 的朋友，是 float 的补丁；保留它可能压制flex-wrap: wrap或遮挡溢出内容 - 检查开发者工具里
float是否被划掉（strikethrough）：如果还在，说明它没被真正移除，或作用在了错误层级
flex 容器该加在哪一层
不是给最外层 div 或 body 加 display: flex，而是要找到原布局中承担“一行内排多个块”的那个直接父容器。比如结构是 <div class="row">
<div class="col"></div>
<div class="col"></div>
</div>，那 .row 才是目标容器。
- 设错层级会导致部分子项被 flex 管理，部分仍在 float，视觉撕裂
- 过度嵌套 flex 容器会引发 margin 折叠异常、计算开销上升
- 若原布局有“浮动标题 + 浮动正文”，它们属于不同逻辑行，应分属不同 flex 容器，而非塞进同一个
子项宽度和对齐怎么对应原来的 float 效果
原 float: left 子项默认“内容宽度”，而 flex 子项默认不收缩（flex-shrink: 1 但受内容影响），直接替换常出现宽度不均、换行错乱。关键不是硬套百分比 width，而是用 flex 规则映射语义：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 原“三等分栏” → 改用
flex: 1（更健壮，自动等分剩余空间） - 原“左窄右宽” → 左项
flex: 0 0 200px，右项flex: 1（明确固定+自适应组合） - 原靠右浮动的按钮 → 父容器设
justify-content: flex-end，而不是给按钮加margin-left: auto（后者虽可行，但语义模糊） - 要换行必须显式写
flex-wrap: wrap，否则子项宁可溢出也不折行
哪些地方千万别硬切，必须保留 float
不是所有 float 都该删。真正该留下的，是它原本就擅长的场景：
- 新闻正文里图片左浮、文字自然绕排——
float是目前唯一原生支持非矩形环绕的方案 - 邮件模板（HTML email）：Outlook Desktop 等客户端基本不认 flex，
float+table仍是事实标准 - 接手一个满屏
.clearfix的老系统，上线时间紧？局部不动比全局重构更稳 - 注意边界：浮动必须作用于非 flex 容器的后代元素（即“嵌套再深一层”），不能出现在 flex item 的直系子元素上
真正难的不是“会不会用 flex”，而是判断哪块该切、哪块该留；不是“删掉 float”，而是把布局语义从“借位排版”切换到“原生控制”。过渡时最容易忽略的，是默认 flex-wrap: nowrap 和未控住 flex-shrink 导致的文本撑爆容器——这些细节不处理，flex 就只是换个名字的 bug 温床。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
