修复了具有负 margin-right 和移动浮动的内联块 div：-4px 有什么特别之处？

Question

这很奇怪。我试图在右浮动 div 旁边放置一个固定宽度的 div，并且我不想对 div 重新排序（因为这是分布式主题）。所以我在固定div上使用负margin-right，我得到了在我看来很奇怪的东西：如果它是-4px或更小，那么浮动会移到一边；如果它是-4px或更少，那么浮动会移到一边；否则，它会保持在下方。

玩 在 jsbin 上使用代码进行现场演示，其中包含以下内容：

<style>
  .container {
    width: 200px;
    height: 200px;
  }
  .box {
    width: 100px;
    height: 100px;
  }
  .one {
    margin-right: -4px; /* If <= -4, .two box shifts up */
    display: inline-block;
  }
  .two {
    float: right;
  }
</style>
  <div class="container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>

有人可以解释一下其中的奥秘吗？在这种情况下，数字 -4 有什么特别之处？

Answer 1

4px 恰好是该 font-size 处“空间”的宽度。

如果将 #container 的 font-size 更改为 32px，它坏了。

解决此问题的明智方法包括：

• 删除 margin-right: -4px ，然后删除之间的空格HTML 中的 div。
• 不要使用 display: inline-block。相反，float: left 左侧 div 和 float: right 右侧 div。
  • 如果您担心在没有固定高度时它会破裂 在容器上，那么您必须清除浮动。在容器上使用 overflow:hidden ，或使用 clearfix。
  • 使用 overflow:hidden （除非您有 具体问题）
  • 使用clearfix