html - 如何将两个 div 水平并排放置？

Question

在两个不同的元素中，我学会了两种不同的方法来将两个 div 水平并排放置。一个比另一个更好，还是只是个人品味的问题，或者只是巧合？

方法一:

.container,
.div1,
.div2 {
  border: 1px solid red;
}

.div1,
.div2 {
  float: left;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
  <div style="clear: both;"></div>
</div>

方法二:

.container,
.div1,
.div2 {
  border: 1px solid green;
}

.div1,
.div2 {
  display: inline-block;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
</div>

Answer 1

第一个在旧浏览器中得到更广泛的支持，但 float 通常会导致一些奇怪的行为(不错，没有什么会破坏你的设计，只是有点意外)。

当您在生命周期的后期检查一些随机浏览器时，您会开始使用 inline-block 只是为了在您的设计中发现一些错误。

我通常坚持使用float，而且只使用float。

编辑

近 10 年后重新审视这个答案，我现在的建议是坚持使用 flexbox 并且只使用 flexbox。试用 https://flexboxfroggy.com/如果你需要一些练习。