浮动父div为何取浮动子div的假设宽度而非实际宽度？如何修正？

这是个很典型的CSS浮动元素宽度计算问题，我来帮你拆解清楚：

为什么父元素宽度不是子元素的实际宽度？ #

当你给父元素设置float: left且width: auto时，它的宽度遵循**“收缩包裹（shrink-to-fit）”规则，但这里的收缩逻辑并不是直接取子元素的最终宽度，而是优先参考内部文本的“首选最小宽度”**——也就是文本不换行时的单行宽度。

你的子元素虽然设置了width: 16%和min-width: 150px，但父元素在计算自身宽度时，会先读取子元素内文本的单行显示宽度（也就是你看到的那个比子元素宽的父盒宽度），然后以此为基准确定自身宽度。之后子元素才会在父元素内部按照你设置的宽度规则（取16%和150px中的较大值）进行布局，这就导致了父盒比子盒宽的现象。

简单说：父元素的宽度计算优先级高于子元素的宽度限制，它先被文本的单行宽度“撑”开了，子元素只能在这个已确定的父盒宽度内收缩自己。

如何让父元素收缩至子元素的实际宽度？ #

这里有两个靠谱的解决方案，适配不同的浏览器需求：

方案1：使用width: fit-content（现代浏览器首选） #

fit-content是CSS专门用来实现“收缩至内容实际宽度”的属性值，它会直接参考子元素的最终宽度来确定父元素的宽度，完美解决你的问题：

#parent {
  width: fit-content; /* 核心：让父元素收缩到子元素的实际宽度 */
  float: left;
}
#child {
  width: 16%;
  min-width: 150px;
  float: left;
}

方案2：改用display: inline-block（兼容旧浏览器） #

如果需要兼容IE这类不支持fit-content的旧浏览器，可以把父元素的float: left替换为（或搭配）display: inline-block，因为inline-block的宽度计算会直接参考子元素的实际尺寸：

#parent {
  display: inline-block;
  float: left; /* 如果需要保持浮动特性，保留这一行 */
}
#child {
  width: 16%;
  min-width: 150px;
  float: left;
}

这两种方案都能让黑色父盒完全贴合红色子盒的宽度，符合你的预期。

内容的提问来源于stack exchange，提问作者Shepard