父级的min-width对浮动子元素无约束力，因浮动元素脱离文档流，其宽度由自身属性决定；解决需在子元素设min-width、断行规则及box-sizing等。
父级的 min-width 对浮动子元素宽度没有直接约束力——它只管父容器自身最小宽度，不干预子元素的尺寸计算或换行行为。
为什么给父容器设 min-width 不能解决浮动项宽度问题
浮动元素脱离文档流，其宽度由自身内容、width、min-width 和盒模型共同决定，和父容器的 min-width 完全无关。父容器设了 min-width: 300px，子元素该换行还是换行，该溢出还是溢出。
常见错误现象：.sidebar { min-width: 250px; } + 多个 float: left 子项 → 子项依然挤成一行后穿出右边界，或第二行首项卡在第一行短项右侧
- 父容器
min-width不触发 BFC，无法包含浮动高度，更不控制子项排布 - 子浮动项若未设
width或min-width，默认收缩包裹，不受父级限制 - 开发者工具里能看到父容器 computed width 达到
min-width，但子项总宽仍超限，说明问题根本不在父容器“不够宽”
真正起作用的是子元素自身的 min-width + 换行策略
要防止浮动项被压缩过窄或长文本撑破容器，必须把约束落在浮动元素自己身上，并配合文本断行规则：
- 给每个浮动项加
min-width: 120px（根据内容长度定），避免空标签或短词导致塌缩 - 对含长无空格字符串（如 URL、base64）的项，必须配
word-break: break-all或overflow-wrap: break-word - 若子项是
display: flex或inline-block，需额外加max-width: 100%和box-sizing: border-box，否则min-width可能被忽略 - IE 旧版本不支持
min-width在浮动元素上生效，需降级为width: 120px+white-space: nowrap控制底线
当父容器宽度本身就不够时，min-width 只是掩耳盗铃
如果父容器实际渲染宽度小于所有浮动子项所需总宽（含 padding/border/margin），即使设了 min-width，浏览器仍会强制换行或溢出——这不是 bug，是盒模型的必然结果。
- 用开发者工具检查每个浮动项的 “Computed → total width”，确认是否 ≤ 父容器 “Computed → width”
- 统一加
box-sizing: border-box，避免padding和border额外加宽 - 用
calc(50% - 10px)替代固定像素值，让宽度随父容器弹性伸缩 - 若必须等分布局，优先改用
display: flex+flex: 1，min-width才真正可控
最容易被忽略的一点：浮动布局中，min-width 的生效前提是元素仍在文档流中有参与尺寸计算的“位置感”——而 float 元素恰恰失去了这个前提。所以所有对父级施加的尺寸限制，本质上都是在修一个已经脱离轨道的车轮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
