float元素不设width会收缩为内容宽度，导致布局不可控；必须显式设置可预测的width（如calc或百分比配box-sizing），并用父容器max-width和bfc清除浮动来约束整体布局。
float元素不设width会收缩为内容宽度，导致布局不可控
浮动元素一旦脱离文档流，就不再继承父容器的100%宽度；如果不显式设置width，它会按“shrink-to-fit”规则收缩成内容实际所需宽度。比如一段短文字+图标，可能只占80px，而右侧一个div默认是块级、宽度100%，根本没法紧贴它右侧排布——结果就是自动换行、留白错位。
这不是浏览器bug，而是浮动机制的设计逻辑：浏览器需要知道“这个浮动块占多宽”，才能计算后续元素的绕排空间。没width，就等于没提供可靠几何尺寸。
- 常见现象：
float: left的导航li文字变少后，右侧主内容突然掉到下一行 - 图片浮动但没设
width，父容器有padding或max-width时，右侧文字块因可用空间估算失败而折行 - 多个
float: left卡片在响应式缩放中某刻集体换行，本质是单项宽度浮动后失去约束，总宽意外超限
width不是“必须写死”，但必须可预测
写width: 200px或width: 33.333%本身没问题，但要注意它们如何被真实解析：
-
width: 33.333%在2560px屏幕下算出来是853px，两列加间隙就远超阅读舒适区（通常建议单栏不超过700px） - 若同时写了
padding: 16px但没设box-sizing: border-box，实际占宽 = 33.333% + 32px，容易撑破容器 - 含长URL或无空格英文的文本会让浮动容器强行扩展，
width被忽略——这是内容溢出，不是width失效
真正要的是“可控的宽度边界”，所以更推荐：width: calc(33.333% - 20px)配box-sizing: border-box，比百分比+固定padding混搭更稳。
max-width不能直接加在float元素上，得加在父容器
max-width对单个浮动元素基本无效——因为浮动后它已脱离文档流，父容器若没触发BFC，max-width约束力极弱。真正起作用的是给它们共同的父容器加限制：
- 外层
.container设max-width: 1200px; margin: 0 auto;，再让子元素float，大屏下所有浮动项的计算基数就锁定在1200px内 - 避免在浮动子元素上写
max-width: 300px，它常被float覆盖或忽略 - 确认父容器的
display和position允许块级约束：比如display: flex或position: absolute下max-width可能不生效
图片变形不是float的问题，而是object-fit没配宽高
浮动本身不会拉伸图片，但会导致父容器高度塌陷，进而让图片渲染失去参照——这时仅写object-fit: cover完全没用。必须同时满足三个条件：
-
img元素有明确的渲染尺寸（width和height都得设，或至少width+max-height） -
object-fit值明确（cover、contain、fill三选一，不能留空） - 父容器已清除浮动（用
display: flow-root或overflow: hidden），否则高度塌陷会让object-fit失去作用域
单独修图片样式只能掩盖表象；父容器塌陷引发的连锁错位（背景色缺失、后续区块上移）才是根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
