clear加了也没用是因为父容器未形成bfc，仅能解决兄弟元素遮挡，无法修复塌陷；应优先用display: flex或overflow: hidden创建bfc。
浮动失效时，clear 为什么加了也没用
常见现象是子元素撑不开父容器，或者相邻块级元素错位——根本原因不是没加 clear，而是父容器本身没形成 BFC，导致浮动溢出。加 clear 只能解决兄弟元素被遮挡的问题，对父容器塌陷无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先给父容器加
display: flex，它天然创建 BFC 且不依赖清除 - 若必须保留块流布局，改用
overflow: hidden或display: flow-root（更语义化） - 避免用
clear: both在父容器上硬顶，这属于 hack，且在 Flex 下完全无意义
Flex 替换 float: left/right 的对齐逻辑怎么映射
浮动靠方向推挤，Flex 靠主轴对齐控制。直接把 float: left 换成 justify-content: flex-start 是错的——前者影响文档流位置，后者只管容器内排列。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单行左右分栏：用
display: flex+justify-content: space-between，而非模拟浮动的margin-left: auto - 多列等宽卡片：用
flex: 1或flex-basis: 25%，别再写float: left; width: 25% - 右对齐按钮组：用
margin-left: auto推到最后，比float: right更可靠，且不会脱离文档流
IE8–IE11 兼容性断点在哪，要不要 polyfill
Flex 布局在 IE10+ 支持带前缀的旧语法（display: -ms-flexbox），但 IE9 及以下完全不支持。如果项目还要求兼容 IE8，就别迁移到 Flex，老老实实用 float 或表格布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只支持 IE10+？加
-ms-前缀即可，无需额外 polyfill - 用 Autoprefixer 自动补全，但注意它不处理
flex-wrap在 IE10 的 bug（会忽略换行） - 真实项目中，IE11 的
flex: 1行为和现代浏览器不一致，建议显式写flex: 1 1 auto
重构后高度不一致、文字截断变严重了
浮动元素默认 height: auto，而 Flex 项在交叉轴（align-items: stretch）下会拉伸填满容器高度，导致文字内容被压扁或省略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关闭拉伸：给子项加
align-self: flex-start，或给容器设align-items: flex-start - 文字截断问题常来自
min-height被忽略，Flex 下需显式设置min-height: 0才允许内容收缩 - 旧代码里靠
overflow: hidden配合浮动实现的“两行截断”，Flex 下要配合display: -webkit-box，不能只靠text-overflow
迁移时最麻烦的不是语法替换，而是浮动隐含的“脱离文档流”特性在 Flex 下需要主动模拟。比如侧边栏固定宽度+主内容自适应，得靠 flex: 1 和 min-width: 0 组合才能复现原来的行为，漏掉任意一个都可能让布局突然崩掉。
