clear 属性在 Flex 容器中完全无效，因其专为浮动设计，而 Flex 创建的格式化上下文绕过传统文档流；应使用 flex-wrap、flex-basis 或 order 实现换行与顺序控制。
clear 属性在 Flex 容器里根本不起作用
clear 是为浮动（float）设计的，而 Flex 容器会创建一个 Flex 格式化上下文（FFC），它完全绕过了传统文档流中的浮动机制。只要父元素设置了 display: flex 或 display: inline-flex，所有子元素就自动脱离普通块流，float 和 clear 都会被忽略——浏览器甚至会在 DevTools 中把它们标为“无效”或打删除线。
Flex 子元素的“换行”得靠 justify-content / flex-wrap 控制
如果你原本想用 clear: both 让某个子元素强制换到下一行（比如在两列布局后插一个横跨全宽的 banner），那在 Flex 里应该改用：
-
flex-wrap: wrap开启换行（默认是nowrap） - 给目标子元素设
flex-basis: 100%或width: 100%，让它撑满整行 - 必要时配合
order调整视觉顺序（clear本质是影响顺序，但 Flex 里用order更直接）
例如：
.container { display: flex; flex-wrap: wrap; }
.item { flex: 0 0 50%; } /* 两列 */
.banner { flex-basis: 100%; }
这样 .banner 就会自动换行并独占一行。
别试图在 Flex 里混用 float / clear —— 兼容性和可维护性双崩
即使你在 Flex 子元素上强行写 float: left + clear: both，结果也是不可预测的：Chrome 可能无视，Firefox 可能部分生效但破坏对齐，Safari 可能触发渲染异常。更麻烦的是，这类写法会让后续维护者误以为你在处理传统流布局，增加调试成本。
- Flex 不支持
float的清除逻辑，没有“浮动上下文”可清 - Flex 子元素的定位由主轴/交叉轴、
flex-grow/flex-shrink等规则决定，和clear所依赖的“浮动脱离+流内占位”模型冲突 - 如果真需要混合布局逻辑，优先考虑嵌套：外层 Flex，内层用
display: block+clear的容器包裹特定内容
真正该关注的是 Flex 格式化上下文的边界效应
FFC 不仅让 clear 失效，还会让 vertical-align、margin-collapse、::first-line 等传统块级特性失效或行为改变。最容易被忽略的一点是：FFC 会截断外部的 margin 传递——父 Flex 容器的 margin 不会与子元素 margin 合并，但子元素之间的 margin 仍会正常作用。这导致一些旧 CSS 重置规则（比如全局 * { margin: 0 }）在 Flex 布局里反而暴露了意外间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
