float 在 Flex 容器的直接子元素上完全失效，因其被 Flex 布局逻辑忽略；浮动应作用于 flex item 的后代元素，实现如文字环绕等细节排版。
float 与 display: flex 同时使用会怎样
不会报错，但 float 属性在 Flex 容器的子元素上**完全失效**。只要父容器设置了 display: flex，其直接子元素的 float、vertical-align、clear 等传统定位属性都会被忽略。
这是因为 Flex 布局已接管子项的排列逻辑，浏览器按规范直接丢弃这些冲突声明。
-
float: left在flex子项上写不写效果一样，子项仍按flex-direction和order排列 - 试图用
float“微调”某个 flex item 的位置，实际不起作用 - 若想让某个子项脱离 flex 流（比如右上角悬浮按钮），应改用
position: absolute并配合flex容器的position: relative
需要浮动 + 弹性布局共存的真实场景
典型情况是：外层用 Flex 控制整体结构（如 header / main / footer 垂直分布），而内部某一块（如文章正文）仍需兼容老式排版逻辑——比如文字环绕图片、多栏浮动列表等。
此时浮动不是用在 flex item 上，而是用在 flex item 内部的**后代元素**中：
立即学习“前端免费学习笔记（深入）”；
.article {
display: flex;
flex-direction: column;
}
.article-content {
/* 这个 div 是 flex item，本身不用 float */
}
.article-content img {
float: right; /* float 用在这里：img 是 .article-content 的子元素，非 flex item */
margin: 0 0 1em 1em;
}- 浮动必须作用于非 flex 容器的子元素（即“嵌套层级再深一层”）
- 注意清除浮动：若
.article-content高度塌陷，需在其上加overflow: hidden或用伪元素::after { content: ""; display: table; clear: both; } - 现代替代方案：用
shape-outside实现文字环绕，但兼容性不如float
为什么有人试图混用 float 和 flex
常见动机有三个：float 曾用于实现两栏布局（左导航+右内容）、文字环绕、以及“向右推一个按钮”；而迁移到 Flex 后，没意识到对应能力已有更直接的写法。
- “右对齐一个按钮” → 改用
margin-left: auto（在 flex 容器内） - “左右两栏” → 用
flex: 1和flex: 2，或flex-basis - “文字绕图” → 保留
float，但确保它不在 flex 容器直系子元素上 - 误以为
float能辅助响应式断点切换 → 实际应靠@media+flex-direction切换
调试时如何快速识别 float 失效
打开浏览器开发者工具，选中目标元素，在 Styles 面板里看 float 是否被划掉（strikethrough）。如果被划掉，说明它被更高优先级的布局上下文覆盖了——大概率父级是 display: flex、grid 或 table。
- 检查父元素 computed 样式中的
display值 - 临时注释掉父级
display: flex，看float是否突然生效（验证因果关系） - 不要依赖“看起来对了”来判断，务必看 computed 样式或布局面板中的 actual flow
浮动和 flex 不是“配合”，而是“分层使用”：flex 管结构，float 管内容级细节。混淆层级是多数问题的根源。
