为何设置width:25vw的4个div无法横向对齐铺满视口？

嘿，这个问题其实戳中了CSS里块级元素宽度计算和vw单位的一个容易混淆的细节，我来帮你拆解清楚！

核心原因：vw和body默认宽度的计算基准不一样 #

你遇到的问题本质是这两点的冲突：

• vw单位的宽度是基于整个视口的总宽度——包括垂直滚动条的宽度（如果浏览器显示滚动条的话）。
• body作为块级元素，默认宽度是auto，这个auto对应的是视口的可用宽度——也就是视口总宽度减去垂直滚动条的宽度（当滚动条存在时）。

当你四个div的总宽度是100vw，但body的实际宽度只有100vw - 滚动条宽度，这就导致总宽度超过了body的容纳范围，自然会出现换行和滚动条。

为什么两种写法都会出问题？ #

不管你用inline-block还是float:left，本质都是让div脱离了常规的文档流：

• 用inline-block时，哪怕你设了font-size:0去掉了 inline 元素的空格，还是躲不过vw和body宽度的差值问题。
• 用float:left时，浮动元素不会撑开body的宽度（反而会导致body高度塌陷），body的宽度依然是视口可用宽度，所以总宽度超了就溢出。

为什么设置body {width:100vw}能解决？ #

当你给body设置width:100vw后，body的宽度就和四个div的总宽度（100vw）完全一致了，此时内容不会超出body的范围，自然就没有换行和滚动条了。

关于你疑惑的点：body为啥不自动扩展到内容宽度？ #

这里有个误区：当元素浮动或设为inline-block时，它们脱离了常规文档流，body作为块级元素不会自动扩展宽度来容纳这些元素。body的宽度默认还是基于它的包含块（html元素）的可用宽度，而html的默认宽度也是auto（视口可用宽度），所以不会跟着浮动内容变宽。

更优雅的解决方案：用Flex布局 #

其实不用纠结vw和body宽度的问题，用现代的Flex布局可以完美解决这个需求，代码更简洁也更可靠：

body {
  margin: 0;
  padding: 0;
  display: flex; /* 把body变成flex容器 */
}
div {
  flex: 1; /* 每个div均分容器宽度 */
  height: 100vh;
  background-color: lightblue;
}

Flex布局下，容器（body）默认会占满视口宽度，子项的flex:1会自动均分宽度，完全不用担心溢出问题。

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