overflow: hidden 能让右侧自适应是因为触发 BFC 后形成独立渲染区域，自动避开浮动元素空间；display: flow-root 是更优现代方案，语义清晰且无副作用。
为什么 overflow: hidden 能让右侧自适应？
因为触发 BFC（块级格式化上下文）后，该元素会形成独立渲染区域，自动避开浮动元素占据的空间——不是靠“撑开”或“计算”，而是浏览器强制重排时的避让行为。
-
overflow: hidden、overflow: auto、display: flow-root都能触发 BFC，但hidden兼容性最好（IE8+） - 不能用
overflow: visible（默认值），它不触发 BFC，右侧会跑到浮动元素下方 - 注意：如果右侧本身有
min-width或内容过长，可能触发滚动条或溢出，需结合word-break或max-width控制
float 左侧定宽的坑：margin 和 width 计算容易错
浮动元素脱离文档流，但它的 margin 仍会影响后续兄弟元素的布局位置；而宽度若写成百分比，又容易受父容器 padding 影响。
- 左侧推荐用固定单位（如
width: 200px），避免响应式下意外缩放 - 如果必须用百分比，父容器记得设
box-sizing: border-box，否则 padding 会让实际宽度超预期 - 浮动元素后紧跟的右侧块，**不能设置
margin-left模拟留白**——它会叠加在 BFC 避让逻辑之外，导致右侧被挤到下一行
现代替代方案：display: flow-root 更干净
IE11+ 和所有现代浏览器都支持 display: flow-root，它专为解决浮动清空问题设计，语义清晰且不附带 overflow 的副作用（比如意外裁剪阴影或 position: absolute 子元素）。
- 右侧容器直接写
display: flow-root，无需overflow，也不影响内部滚动或溢出表现 - 比
overflow: hidden更安全：不会隐藏超出边界的box-shadow或伪元素 - 如果要兼容 IE10 及以下，还是得退回
overflow: hidden，但注意测试transform或filter是否被意外触发硬件加速
当右侧内容是表格或弹性子项时，BFC 触发点容易失效
某些内联盒模型（如 display: table-cell）或 flex 容器子项，会忽略父级 BFC 的避让规则，导致右侧仍与浮动重叠。
立即学习“前端免费学习笔记（深入）”；
- 确保右侧最外层容器是块级且已触发 BFC，不要把
overflow: hidden写在内部table或flex元素上 - 若右侧用了
display: flex，BFC 必须加在 flex 容器本身（即直接父元素），而不是它的子项 - 调试时可临时加
outline: 1px solid red看实际边界，确认 BFC 是否生效——有效时，outline 不会包裹浮动元素
