Question

很抱歉，如果我的问题重复，我就无法选择相应的搜索请求。

因此，请考虑具有两个内联块子项的父<div>，每个子项都有width: 50%。如果没有为父级设置overflow: hidden，为子级设置float: left，则子级不会在父级内部形成一行。

但为什么呢？为什么50％+ 50％不等于一整行？为什么我们需要浮动？

Answer 1

最常见的情况是因为chlidren节点之间有空格：

#container{
  background: red;
  height: 50px;
}
#container div{
  width: 50%;
  display: inline-block;
  background: green;
  height: 100%;
}

<div id="container">
  <div></div>
  <div></div>
</div>

解决方案是删除空格：

#container{
  background: red;
  height: 50px;
}
#container div{
  width: 50%;
  display: inline-block;
  background: green;
  height: 100%;
}

<div id="container">
  <div></div><!--
  --><div></div>
</div>

第二种最常见的情况是由于浏览器中常见的预设margin：

#container{
  background: red;
  height: 50px;
}

#container div{
  width: 50%;
  display: inline-block;
  background: green;
  height: 100%;
  margin: 8px;  /* browser default */
}

<div id="container">
  <div></div><!--
  --><div></div>
</div>

用margin: 0覆盖它以修复它。

Answer 2

因为空间也发生了。如果您不想使用浮点数，您几乎有两种选择：在html标记之间注释空格或在父项上设置font-size：0px，然后再返回子项。

HTML：为什么浮动：当子项阻止宽度总和等于父宽度

2 个答案: