浮动在Flex容器中完全失效，是因为CSS规范规定：当父元素设为display: flex时，其子元素的float、clear和vertical-align属性被忽略，布局由flex-direction、justify-content等Flex属性统一控制。
浮动在Flex容器里为什么完全失效
只要父元素设置了 display: flex，它的直接子元素上的 float（无论 left、right 还是 none）都会被浏览器忽略——不是“没效果”，而是压根不参与计算。开发者工具里能看到这个属性被划掉（strikethrough），说明它已被 Flex 布局上下文覆盖。
- Flex 子项的排列由
flex-direction、order、justify-content等统一控制，不再走文档流+浮动的老路 - 试图用
float: right把某个按钮推到右侧？该用margin-left: auto - 想让图片文字环绕？浮动必须写在 Flex item 的后代上（比如
.article-content img { float: right; }），而不是 Flex item 本身
旧项目中怎么安全地逐步替换浮动
别一上来就全局搜 float 全删，容易崩。优先从结构清晰、影响面小的模块入手，比如页脚、卡片列表、侧边栏。
- 识别出纯展示型浮动模块（如三列新闻摘要），用
display: flex; flex-wrap: wrap;替换外层容器，子项改用flex: 1 1 280px - 保留原有 HTML 结构，只改 CSS：原
.nav li { float: left; }→ 新增类.nav.flex-layout { display: flex; justify-content: space-between; }+.nav.flex-layout li { float: none; } - 对需要兼容 IE9 及更老浏览器的区域，用
@supports (display: flex)包裹 Flex 代码，fallback 仍走浮动
混合布局时最常踩的三个坑
不是不能共存，而是共存的位置错了就立刻错位。
-
坑一：Flex 容器外有浮动侧边栏，导致整个 Flex 区域被“挤偏”——给 Flex 容器加
clear: both或overflow: hidden -
坑二：在 Flex item 上写
float同时又设align-items: center，结果垂直居中失效——删掉float，用 Flex 自己的能力 -
坑三：媒体查询里桌面用浮动、移动端切 Flex，但忘了重置浮动相关样式（如
width、margin），造成小屏下宽度溢出——切换前统一清空浮动残留样式
什么时候该彻底放弃浮动
当你的目标浏览器支持度已覆盖 Chrome 49+、Firefox 44+、Safari 10.1+、Edge 14+（即 2016 年后主流版本），浮动就只剩一个合理用途：图文环绕。
立即学习“前端免费学习笔记（深入）”；
- 两栏/三栏整体布局？用 Flex 或 Grid
- 导航菜单对齐？
justify-content: space-around比float: left+clearfix更稳 - 响应式断点切换？
flex-direction: column切换比靠float+width+clear组合更可靠
真正难的不是写 Flex，而是判断哪个层级该交出去——浮动只该出现在内容级（如段落里的图），不该出现在结构级（如页面主框架）。
