float:left 和 float:right 元素会分别向左、右边界贴靠，但不自动协调位置，易导致错位、父容器高度塌陷；overflow:hidden 通过触发 BFC 解决塌陷，现代推荐用 display: flow-root 或 flex 布局替代。
float:left 和 float:right 同时出现在同一父容器里会怎样
它们各自向左右边界贴靠，但彼此不协商位置——float:left 元素从左往右“挤”，float:right 元素从右往左“挤”，中间空隙由剩余空间决定，不是自动对齐或等距分布。
常见错误现象：
- 两个元素上下错位（尤其高度不同时），
float:right元素顶到父容器顶部，float:left元素从它下方开始找空间 - 父容器高度塌陷为 0，后续内容上浮覆盖浮动区
- HTML 顺序影响渲染结果：如果
.right写在.left前面，它会优先占最右，.left再贴左，但若宽度不够可能掉行
为什么 overflow:hidden 能让 float:left/right 并排显示
它不是靠“隐藏溢出”起作用，而是触发了 BFC（块级格式化上下文）。BFC 的规则强制父容器包含所有浮动子元素的高度，并约束内部浮动元素的布局范围。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
overflow:hidden在 Chrome/Firefox/Edge 中兼容性极好，但会截断下拉菜单、弹层等溢出内容 - 更现代的替代是
display: flow-root，语义清晰且不干扰溢出行为，已覆盖 Chrome 64+ / Firefox 59+ / Edge 79+ - 伪元素清除法（
::after { content: ""; display: table; clear: both; }）仍有效，但多一层 DOM 计算
float:left 和 float:right 混用时的宽度陷阱
即使你写了 width: 50% + width: 50%，也极大概率无法并排——默认 box-sizing: content-box 下，padding 和 border 会额外撑宽；父容器若有 padding-left/padding-right，也会压缩可用宽度。
必须检查：
- 所有浮动元素是否统一设了
box-sizing: border-box - 父容器有没有隐式
padding或margin（比如重置不彻底的用户代理样式） - 两个元素的总宽度 +
margin+padding+border≤ 父容器宽度 - HTML 中两个浮动元素之间不能有换行或空格，否则可能产生约 4px 间隙
float:left 和 float:right 能否和 flex 混用
不能。一旦父容器设了 display: flex，子元素上的 float 属性会被忽略——浏览器按 flex 规则渲染，justify-content 和 align-items 对浮动子项完全无效。
混用后果：
-
float:left在 flex 容器里失去作用，元素按 flex 默认顺序排列 - 试图给 flex 子项再加
float是冗余且不可预测的，不同浏览器处理方式可能不一致 - 性能上，
float触发重排代价更高；flex 更可控，尤其在动态增删内容时
真正需要左右分栏时，display: flex 配 justify-content: space-between 是更直接、更健壮的选择。浮动的原始定位逻辑和现代布局模型本质冲突，强行共存只会增加调试成本。
