必须删掉float、clear、display: inline-block（仅用于绕流时）、zoom: 1等浮动残留属性；flex容器应设在原浮动“行容器”父级（如.row），而非最外层；子项用flex: 1、flex: 0 0 200px等映射原float语义；IE10/11需加-ms-前缀并避免gap。
float布局转flex时，哪些CSS属性必须删掉
直接删掉所有 float、clear、display: inline-block（如果仅用于绕流对齐）、以及依赖浮动触发的 zoom: 1 或 *zoom: 1。这些是旧布局的“残留指令”，不清理干净，flex容器里的子项仍会按浮动逻辑参与渲染，导致错位或塌陷。
常见错误现象：flex-direction: row 下子元素堆成一列，或高度莫名塌陷——大概率是父容器还挂着 overflow: hidden（曾用来清除浮动），它会截断 flex 子项的伸缩行为。
-
float: left/float: right必须移除，flex 用justify-content和margin控制对齐 -
clear: both没有意义，flex 不产生文档流脱离，无需清除 - 曾用
width+float实现等宽栏？现在改用flex: 1或flex-basis
flex容器该设在哪个父元素上
不是“把最外层div加上 display: flex”就完事。要找准原浮动布局中承担“行容器”角色的那个父级——通常是包裹一组 float: left 子项的直接父容器。比如常见结构：<div class="row">
<div class="col">...</div>
<div class="col">...</div>
</div>，这时 .row 才是 flex 容器目标。
设错层级的后果：子元素没被统一管理，有的 flex 了，有的还在 float，视觉撕裂；或者过度嵌套 flex 容器，引发不必要的嵌套计算和 margin 折叠异常。
立即学习“前端免费学习笔记（深入）”；
- 检查原HTML中哪一层负责“一行内排多个块”，那层加
display: flex - 避免给
body或全局 wrapper 加 flex，除非真需要整页弹性流 - 若原布局有“浮动标题+浮动正文”，它们属于不同逻辑行，应分属不同 flex 容器，而非塞进同一个
flex子项宽度和对齐怎么对应原来的float效果
原 float: left 的子项默认“内容宽度”，而 flex 子项默认不收缩（flex-shrink: 1 但受内容影响）。直接替换后，常出现宽度不均、换行错乱。关键不是硬套百分比 width，而是用 flex 自身规则映射语义。
性能影响：滥用 flex: 0 0 25% 会失去 flex 的响应优势；而全用 flex: 1 又可能让文字过长时撑破容器。
- 原“三等分栏” →
flex: 1（更健壮，自动等分剩余空间） - 原“左窄右宽” → 左项
flex: 0 0 200px，右项flex: 1（明确固定+自适应组合） - 原靠右浮动的按钮 → 父容器设
justify-content: flex-end，而不是给按钮加margin-left: auto（后者虽可行，但语义弱） - 需保留最小宽度防挤压？加
min-width，flex 不会覆盖它
IE10/11下flex兼容性坑怎么绕
IE10–11 支持老版 flex 语法（display: -ms-flexbox），但不支持 gap、flex-wrap: wrap-reverse、align-content: center 等。强行用现代语法会导致布局完全失效，不是错位，是“回归文档流原始排列”。
最容易被忽略的一点：IE 中 flex: 1 等价于 -ms-flex: 1，但 flex: 0 0 auto 在 IE 需写成 -ms-flex: 0 0 auto，漏掉前缀就会回退为 block 布局。
- 必须加
display: -ms-flexbox和对应前缀属性（如-ms-flex-pack: justify对应justify-content） - 避免在 IE 场景用
gap，改用margin模拟 - 测试时打开 IE 开发者工具，切到“仿真”模式选 IE10/11，看是否出现子项垂直堆叠——那是 flex 容器未生效的典型信号
