浮动元素脱离文档流导致父容器无法计算宽度，表现为视觉上“缩成一条线”；根本解法是触发BFC，如overflow:hidden或display:flow-root，使父容器重新感知浮动子项的宽高。
浮动元素不会让外层容器“变窄”，而是让它“算不出宽度”——根本原因是脱离文档流后，父容器默认按内容宽度收缩，而非包裹浮动子项。
float 元素不参与父容器的 width 计算
块级父容器（如 div）在无明确 width 时，默认宽度由其内容决定。但浮动子元素已脱离文档流，父容器在计算自身宽度时直接忽略它们，只看非浮动内容（比如空文本、 或内联文本）。结果就是：父容器视觉上“缩成一条线”或“紧贴文字宽度”，尤其在 flex/grid 未启用的老布局中非常明显。
- 常见现象：
.wrapper包着两个float: left的div，但.wrapper的background-color只显示几像素宽 - 调试技巧：给父容器加
border: 1px solid red，再用开发者工具检查 computed width，常看到是0px或极小值 - 不是 CSS 解析错误，是规范行为——W3C 明确规定浮动元素不参与块格式化上下文（BFC）外的尺寸计算
overflow: hidden 和 display: flow-root 都能触发 BFC，但效果不同
让父容器“重新包含”浮动子项，关键不是“清除浮动”，而是让它成为一个独立的格式化上下文（BFC）。只有 BFC 容器才把浮动子元素纳入尺寸计算范围。
-
overflow: hidden是兼容性最广的方案（IE6+），但它会裁剪任何溢出内容，比如position: absolute的下拉菜单、tooltip 或动画位移过大的元素 -
display: flow-root是现代标准解法（Chrome 64+/Firefox 58+/Safari 15.4+），专为创建无副作用 BFC 设计，不影响溢出，语义也更准确 - 别用
float: left给父容器自己设值来“撑宽”——这会让它也脱离文档流，问题只是转移，且后续兄弟元素布局全乱
两栏自适应布局中，右侧容器必须主动触发 BFC 才能占满剩余宽度
典型后台布局：左侧固定宽 float: left，右侧想自动填满剩余空间。很多人只给左侧设 float，却忘了右侧必须“拒绝被浮动覆盖”，否则它会从左上角开始渲染，文字被左侧遮住。
- 正确写法是右侧容器设
overflow: hidden或display: flow-root，强制它成为 BFC，从而绕开左侧浮动影响，并自然计算自身宽度为“父容器宽 − 左侧宽” - 错误写法：
.right { width: 100% }—— 在浮动存在时，100%是按“塌陷后的父容器宽度”算的，结果右侧还是窄得看不见 - 如果右侧还要嵌套浮动子项，记得它内部也要单独处理高度塌陷，不能指望外层 BFC 一并兜底
真正容易被忽略的是：display: flow-root 不仅解决高度塌陷，也解决宽度不可见问题——它让父容器同时恢复对浮动子项的宽、高感知。而很多人只记住了“清浮动要加 clear: both”，却没意识到那个空 div 对父容器的 width 计算毫无帮助。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
