如何让父div适配子元素尺寸？兼问盒子间距成因

嘿，我来帮你搞定这两个问题！

一、让父容器自动适配子元素总尺寸的方案 #

你当前的代码里，box用了float: left，这会让子元素脱离文档流，导致父容器container既无法正确包裹子元素的高度，也没法自适应子元素的总宽度。这里有两个不需要手动设宽、也不用@media的靠谱方案：

方案1：用Flex布局（最推荐，现代浏览器都支持） #

直接把容器的display改成inline-flex，再加个flex-wrap: wrap就行。这样容器会自动收缩到子元素的总宽度（当子元素能在一行放下时）；如果子元素太多超出父级page的宽度，也会自动换行，容器宽度就会适配父级的宽度，完美适配你的需求：

#page{ width: 500px; }
.container { 
  display: inline-flex; 
  flex-wrap: wrap;
  border: 1px solid black; 
  background: #ddd; 
}
.box { 
  width: 200px; 
  height: 30px; 
  background: #fff; 
  line-height: 30px; 
  text-align: center; 
  border: 1px solid gray; 
}

不管box的尺寸以后怎么变，你都不用手动调整容器宽度，它会自己适配。

方案2：清除浮动+适配宽度（兼容旧浏览器） #

如果需要兼容老浏览器（比如IE10及以下），可以保留float: left，但要给容器加清除浮动的样式，再让它自适应内容宽度：

首先给容器加个清除浮动的伪元素，解决高度塌陷问题：

.container::after {
  content: "";
  display: table;
  clear: both;
}

然后修改容器的样式，让它宽度自适应内容，同时不超出父级宽度：

.container { 
  display: inline-block; 
  width: fit-content; /* 让宽度刚好容纳子元素总宽度 */
  max-width: 100%; /* 防止容器超出父级page的宽度 */
  border: 1px solid black; 
  background: #ddd; 
}
.box { 
  width: 200px; 
  height: 30px; 
  background: #fff; 
  line-height: 30px; 
  text-align: center; 
  border: 1px solid gray; 
  float: left; 
}

二、盒子之间有间距的原因和解决办法 #

你看到的盒子间距，是浏览器的默认行为导致的：当元素是inline或inline-block类型时，HTML里的空白字符（换行、空格、制表符）会被渲染成一个空格。如果用Flex布局时没特意设置，也会有默认的间距。

解决办法分情况： #

1. 如果用Flex布局：直接给容器加gap: 0就能消除间距：

.container { 
  display: inline-flex; 
  flex-wrap: wrap;
  gap: 0; /* 一键消除子元素之间的间距 */
  border: 1px solid black; 
  background: #ddd; 
}

2. 如果用float/inline-block：
   • 方法一：把HTML里的box元素连在一起写，去掉换行和空格：

   <div class="container">
     <div class="box">x</div><div class="box">x</div><div class="box">x</div>
   </div>
   

   • 方法二：给容器设font-size: 0，再给box恢复字体大小（这个方法更灵活，不用改HTML）：

   .container { 
     display: inline-block; 
     font-size: 0; /* 让空白字符不占空间 */
     border: 1px solid black; 
     background: #ddd; 
   }
   .box { 
     font-size: 16px; /* 恢复正常字体大小 */
     width: 200px; 
     height: 30px; 
     background: #fff; 
     line-height: 30px; 
     text-align: center; 
     border: 1px solid gray; 
     display: inline-block; 
   }
   

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