为什么需要漂浮？

Question

这里很简单。我知道在创建流体布局时需要浮动元素，但为什么呢？我尝试删除浮动，并在元素之间出现一些额外的空间。这个额外的空间来自哪里？为什么需要漂浮？     * {       box-sizing：border-box;     }

.box{
  display: inline-block;
  width: 50%;
  border: solid 1px red;
  /*float: left;*/
}

http://codepen.io/anon/pen/WQNvBZ

Answer 1

因为inline-block实际上意味着“将此元素视为外部内联并阻止内部”，浏览器将div元素之间的换行视为实际文字空间字符，它出现在元素之间

通过使用浮点数，您可以更改此内联流的行为，并且div会相互冲洗。

Here is an article如果空间与你的设计相反，如何在inline-block div之间“对抗”这个空间。 TL; DR版本是您可以（1）删除关闭和后续开始标记之间的空格/换行符，（2）使用负边距，（3）将字体大小设置为零（因此空间不会显示），（4）像你建议的那样漂浮它们，或者（5）使用flexbox。