float:left 和 float:right 在同一父容器中不冲突，而是各自贴边浮动；父容器需形成 bfc（如 display: flow-root）以包裹浮动元素，避免高度塌陷，现代布局应优先使用 flex。
float: left 和 float: right 放在同一父容器里，根本不存在“冲突”，只有“各自为政”——它们不协商、不配对、不共享对齐线，所谓“冲突”其实是开发者误以为它们该自动面对面，结果发现布局飘了、塌了、错行了。
为什么 float:left 和 float:right 看起来像在打架
浮动元素的行为由包含块决定，不是彼此。左浮元素贴父容器左边，右浮元素贴父容器右边，中间空隙取决于剩余宽度；如果父容器没包裹住它们（高度塌陷），或者总宽超限（比如 width: 50% + padding + border），视觉上就会错位甚至换行。
- 打开 DevTools 查
Computed面板，会发现两个元素的float值都是生效的，但父容器的height是0—— 这才是真问题 - HTML 顺序影响位置：先写的
float: left元素锚定顶部，后写的float: right会与它顶部对齐；但如果float: right元素写在前面，它可能直接顶到父容器顶部，把 left 元素挤到下方 - 别指望
clear: both加在子元素上能救父容器高度——它只影响后续兄弟元素，对父容器自身无效
必须让父容器“看见”两个浮动元素
关键不是调子元素，而是让父容器形成 BFC（块级格式化上下文），从而感知并包裹所有浮动后代。
- 首选
display: flow-root：.container { display: flow-root; }，语义清晰、无副作用、Chrome 64+/Firefox 59+/Edge 79+ 全支持 - 兼容老浏览器可用
overflow: hidden或overflow: auto，但注意：若父容器本就需要内容溢出（如滚动区域），hidden会裁剪，auto更安全 - 避免用
float: left给父容器自己设浮动来“收浮”——这会让父容器也脱离文档流，引发连锁错位
左右浮动元素的宽度和盒模型陷阱
即使都设了 width: 50%，也很容易因默认 box-sizing: content-box 导致总宽超 100%，触发换行。
- 务必给两个浮动子元素加
box-sizing: border-box，否则padding: 10px会让实际宽度变成50% + 20px - 父容器若有
padding-left或padding-right，会压缩可用宽度，右侧浮动元素极易掉行 - 需要中间留白？别两边都加
margin，改用calc(50% - 8px)控制单侧宽度，或统一用父容器padding留空
现代项目里，别硬扛 float 布局
浮动不是为页面布局设计的，它的行为严重依赖 HTML 顺序、无法等高、清除逻辑脆弱、响应式适配成本高。真正难处理的从来不是怎么让左右浮起来，而是浮起来之后，怎么让整个页面不跟着一起飘走。
- 两栏对齐，一行
display: flex+justify-content: space-between就够了，无塌陷、无错位、天然响应式 - 如果必须嵌入老代码（比如含
float的第三方组件），就用一层 wrapper 隔离：<div class="legacy-float-wrapper"><div class="sidebar"></div></div>，wrapper 设display: flow-root，再把它作为 flex 项目 - 记住：
float在 flex 容器的直接子项上完全无效——浏览器规范强制设为none，这不是 bug，是机制互斥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
