Flex容器内子元素的float和clear被忽略是CSS规范强制要求，因其已转为flex item，脱离块级格式化上下文，clear失效且不参与布局计算，须改用justify-content、margin: auto等Flex原生方案。
Flex容器内子元素的float和clear为什么全被忽略
因为CSS规范强制规定：当一个元素成为Flex项目（即其父元素为display: flex或display: inline-flex）时，float、clear和vertical-align这三个属性**必须被浏览器忽略**。这不是bug，也不是兼容性差异，而是所有现代浏览器（Chrome、Firefox、Safari）都严格遵守的标准行为。
你在开发者工具里能看到clear: both被划掉（strikethrough），但不会报错——它根本没进入布局计算流程。Flex项目的定位完全由justify-content、align-items、margin: auto等Flex专属规则控制，和浮动模型毫无交集。
给Flex子元素加clear:both却没反应？先确认它是不是块级元素
clear本身只对块级盒生效，而Flex子元素默认是display: block没错，但它的盒类型已从“块级盒”变为“flex item”，不再参与块级格式化上下文（BFC）。这意味着：clear连触发条件都不满足，直接跳过。
- 即使你手动写
display: block，也无法恢复clear能力——Flex上下文优先级更高 -
getComputedStyle(el).clear会返回"none"，不是"both" - 用
display: contents或position: absolute包裹Flex子项，只会让情况更糟：既失去Flex特性，又不获得clear能力
想实现类似clear:both的效果？改用Flex原生方案
不要试图在Flex里“模拟清除”，直接用Flex语义表达意图：
- 需要“换行后独占一行” → 给该子元素设
align-self: flex-start+margin-top: auto（配合flex-direction: column）或使用flex-wrap: wrap+flex-basis: 100% - 需要“右侧留空、内容左对齐” → 不要用
float: left再清，直接用justify-content: flex-start+margin-right: auto - 需要“避开某个固定宽度侧边栏” → 外层Flex设
grid-template-columns: 200px 1fr（改用Grid），或用flex: 0 0 calc(100% - 200px)配合margin-left: 200px
强行混用float和flex只会让样式表越来越难维护，且在响应式断点中极易断裂。
真正容易被忽略的副作用：FFC截断margin传递
Flex容器创建的是Flex格式化上下文（FFC），它不仅让clear失效，还会切断外部margin的合并逻辑：父Flex容器的margin-top不会与第一个子元素的margin-top折叠，但子元素之间的margin仍会正常合并。这意味着，如果你依赖全局* { margin: 0 }重置，Flex子项之间可能意外出现间距，而父容器看起来“没撑开”——其实只是margin没合并，不是高度塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
