不是bug，是css规范强制行为：父元素设display: flex后，子元素进入flex格式化上下文，float、clear、vertical-align被明确定义为“不适用”，浏览器将其计算值设为none；应改用justify-content、margin-left: auto等flex原生属性实现对齐。
Flex容器里写了float: right但没反应，是bug吗
不是bug，是CSS规范强制行为。只要父元素设了display: flex或display: inline-flex，它的直接子元素就成为Flex项目，此时float、clear和vertical-align三个属性被定义为“不适用”，浏览器必须把它们的计算值设为none。你在DevTools的Computed面板看到float: none或not applicable，就是规范在起作用，不是样式没加载、没写对，也不是浏览器兼容问题。
想右对齐按钮，该用什么替代float: right
所有靠float实现的老式对齐意图，在Flex里都有更直接、语义更明确的替代方式：
- 整行右对齐：给容器加
justify-content: flex-end - 单个按钮靠右（比如操作栏最后一个）：直接给它加
margin-left: auto - 左右两端各一个元素：用
justify-content: space-between - 单个项目水平居中（主轴为水平且宽度未占满）：用
margin: 0 auto，但注意在flex: 1的项目上会失效——因为宽度被拉满，自动margin没有可分配空间
Flex容器自己被挤偏了，别怪子元素的float
真正容易被忽略的是：你调试半天float为啥不生效，其实问题可能出在Flex容器**外面**。比如左侧有个float: left的侧边栏，后面紧跟的.main { display: flex; }区域被卡在侧边栏右侧空白处——这不是子元素的float失效了，而是这个Flex容器自己处于未清除的浮动上下文中。
解决方式是让Flex容器自身触发BFC：
- 推荐：
display: flow-root（语义清晰，现代标准） - 兼容方案：
overflow: hidden（注意可能意外裁剪position: absolute子元素） - 避免在Flex容器内部加
::after { content: ""; display: table; clear: both; }——它里面根本没有浮动，清了也没用
必须混用浮动和Flex？先物理隔离上下文
如果维护老代码，必须保留某块区域的float行为（比如图文环绕），又得把它塞进新Flex布局里，唯一靠谱做法是“隔开上下文”：
- 把需要浮动的元素包进一个
div，这个div设为display: block（或干脆不设），让它保持普通文档流 - Flex容器只负责调度这个包装盒的位置，内部浮动由盒子自己处理
- 别在Flex item上写
float、vertical-align、display: inline-block等传统布局属性——它们要么被忽略，要么引发意外尺寸塌陷
Flex和浮动本质属于两套布局范式，强行嫁接只会增加调试成本。什么时候该用哪套，取决于你要解决的是“组件排列”还是“文本环绕+定位”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
