设置float后块级元素自动收缩为内容宽度，且脱离文档流导致父容器高度塌陷；左右浮动对宽度影响一致，现代布局应优先使用Flexbox或Grid。
float让块级元素突然“变窄”了
设置 float: left 或 float: right 后，原本独占一行、宽度默认 100% 的块级元素（如 <div>）会自动收缩为内容宽度——这不是 bug，而是规范行为。它本质上被强制“块状化”，表现得像 display: inline-block，不再继承父容器宽度。
- 没设
width的<div>浮动后，宽度 ≈ 文本/子元素撑开的最小宽度 - 如果里面只有几个字，它就缩成几像素宽；如果含一张 200px 图片，宽度可能接近 200px（还要算内边距和边框）
- 这个收缩只发生在水平方向；高度仍由内容或显式
height决定
为什么父容器高度塌陷是直接后果
浮动元素脱离文档流，父容器在计算高度时“看不见”它——哪怕它明明有 200px 高，父容器的 height 仍可能为 0 或仅包含非浮动子元素的高度。这常导致背景色消失、边框截断、后续元素上移等视觉断裂。
- 典型现象：
<div class="wrap"><div class="box" style="float:left"></div></div>中.wrap高度塌陷 - 不是所有父容器都塌陷：若父容器本身有
height、min-height或含其他非浮动内容，可能掩盖问题 -
overflow: auto或overflow: hidden可触发 BFC，间接修复塌陷，但本质是创建新格式化上下文，不是“清除浮动”
float:left 和 float:right 在宽度处理上没区别
左右浮动对宽度收缩的影响完全一致：都导致块级元素放弃 100% 宽度，转为内容自适应。真正影响布局走向的是浮动方向与兄弟元素的排列关系，而非尺寸逻辑。
- 多个
float: left元素会从左到右依次贴靠，直到容器放不下才换行 - 混用
float: left和float: right时，它们分别向两侧“吸附”，中间可能留空——此时若无其他内容填充，父容器高度仍可能塌陷 - 浮动方向不影响元素自身宽度计算，只影响其在包含块中的定位起点
现代布局中 float 的失宽问题已基本可规避
除非维护老项目或实现文字环绕这种原始设计意图，否则 float 不再是布局主力。Flexbox 和 Grid 天然保持宽高可控，且不脱离文档流。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex替代多列浮动，宽度由flex属性控制，无意外收缩 - 纯图文环绕场景仍需
float，但应明确设置width（如img { float: left; width: 300px; }），避免依赖内容撑宽 - 注意：即使加了
width，浮动元素仍会引发父容器塌陷——失宽和塌陷是两个独立副作用，需分别应对
