在 Google Chrome 和 Microsoft Edge 上浮动

Question

我正在使用 float 来对齐 3 个 div（左、中、右）。第一张照片显示了它的外观 on Google Chrome。第二张图片显示如何 它看起来 on Microsoft Edge 。浮动在 Google Chrome 上运行良好，当使用 Microsoft Edge 时，最后一个 div(right) 移动到左下容器。为什么会这样

* body,
p,
img {
  margin: 0;
}

.container {
  width: 900px;
  border: 5px solid green;
  padding: 3px;
  margin: auto;
}

.left {
  background-color: blueviolet;
  width: 150px;
  height: 300px;
  line-height: 100px;
  text-align: center;
  float: left;
}

.center {
  width: 600px;
  height: 300px;
  background-color: burlywood;
  float: left;
}

.right {
  width: 150px;
  height: 300px;
  background-color: coral;
  float: left;
}

.clear {
  clear: left;
}

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

Answer 1

您编写的 CSS 使输出如图所示。在您的容器中，您使用了边框和填充。这两者会导致容器的实际宽度在某些浏览器上小于 900px。所以宽度是 900 - (5 + 5) - (3 + 3) = 884px。

可能，chrome 试图了解您想要什么，但 Edge 会为您提供实际输出。这是预期的，因为边框和填充会影响 div 容器的最终宽度。不过，设置边距不会影响它。

要解决这个问题并让三只狗在所有浏览器上出现在同一行，即珊瑚 div 出现在右侧，您需要将以下 CSS 添加到您的容器（或最好是 body 标签）：

box-sizing: 边框框；

您可以在https://css-tricks.com/box-sizing/阅读更多内容

不要忘记添加所有供应商前缀