不应混合使用Flex与Float，因Flex子项会忽略float属性，导致冗余代码和维护困难；应选择Flexbox或Grid作为现代布局方案，保持样式清晰可维护。
Flexbox 和浮动（Float）是 CSS 中两种不同的布局方式，它们的设计初衷和工作机制完全不同。在现代前端开发中，不推荐将 Flexbox 与 Float 混合使用，因为这容易导致布局混乱、样式冲突以及维护困难。
为什么不应该混合使用 Flex 与 Float
Flexbox 是一种一维布局模型，通过设置容器的 display: flex 来控制子元素的排列、对齐和空间分配。而 Float 最初是为了实现文字环绕图片等效果设计的，后来被“滥用”于页面整体布局（如多列布局），但它脱离文档流，需要额外清除浮动。
当一个元素既处于 Flex 容器中，又被设置了 float: left 或 float: right 时：
- 在大多数浏览器中，float 属性会被忽略，因为 Flex 子项遵循 flex 布局规则，不再受传统定位（包括 float）影响。
- W3C 规范明确指出：如果一个元素是 flex item（即父元素是 display: flex），那么它的 float 和 clear 属性将不起作用。
实际案例：错误的混合用法
假设我们想做一个简单的侧边栏+主内容区域布局，并尝试这样写：
.container {
display: flex;
}
.sidebar {
width: 200px;
float: left; /* 错误：这里 float 不起作用 */
background: #eee;
}
.main {
flex: 1;
float: right; /* 这个也会被忽略 */
background: #f9f9f9;
}
虽然最终布局可能看起来正常，但那是因为 flex 布局本身已经完成了排列工作，float 完全多余且误导后续开发者。这种写法属于典型的“防御性编码”误区——以为加了 float 更保险，实则增加冗余代码。
正确做法：选择一种布局方式
如果你决定使用 Flexbox，就应完全依赖其能力完成布局，无需借助 float。上面的例子应简化为：
.container {
display: flex;
}
.sidebar {
width: 200px;
background: #eee;
}
.main {
flex: 1;
background: #f9f9f9;
}
如果你想使用传统浮动布局，则不应使用 display: flex：
.container {
overflow: hidden; /* 清除浮动 */
}
.sidebar {
float: left;
width: 200px;
background: #eee;
}
.main {
margin-left: 200px;
background: #f9f9f9;
}
特殊情况下的兼容处理
在一些老旧项目升级过程中，可能会遇到部分模块仍依赖 float 的情况。此时建议：
- 避免将 float 元素直接放入 flex 容器中作为 flex item。
- 若必须共存，可通过 wrapper 包裹 float 元素，使其在 flex 结构中作为一个整体参与布局。
例如：
.container {
display: flex;
}
.float-wrapper {
flex: 1;
}
.float-content {
float: left;
width: 100px;
}
这种方式下，float 只在 .float-wrapper 内部生效，不影响外部 flex 结构，属于可控的隔离策略。
基本上就这些。现代布局首选 Flexbox 或 Grid，不要再混用 float 实现结构布局。理解每种技术的适用场景，才能写出清晰、可维护的 CSS。
