Html 添加并排divs

我似乎总是把这个简单的HTML东西弄错了。我正在尝试在我的测试页面上添加一个并排的div：

我添加的代码如下所示：

<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>

测试hello
测试hello 2

我添加了

标记，这样您可以更好地在页面上找到它

但是你是否看到有这样的文字出现在那里：“当考虑任何人的伤害风险时”-但该文字在下面的

标签中。为什么会出现在那里

---

在另一个div中包装我要对齐的两个div是否更好？将这两个div包围在父div中，并将溢出设置为隐藏

<div style="overflow:hidden;">
  <div style="width: 460px; float: left; ">
    <strong>Test hello</strong>
  </div>
  <div style="width: 300px; float: right; ">
    <strong>Test hello 2</strong>
  </div>
</div>

测试hello
测试hello 2

另一种选择（如其他人所指出的）是使用第三个元素：

<div style="clear:both;"></div>

至于哪一个更好，还有争议。通常，两者都可以。以下是一篇关于这个主题的帖子：

---

因为您的整个页面宽度为

960px

。组合的div宽度为

760px

（400+300）。如果将200px添加到第二个div中，则应该可以

---

编辑：由于填充，您可以将任意一个div增加

150px

，这样就可以了

在两个浮动div之后，添加另一个空div

<div style="clear:both;"></div>

这将导致两个浮动div将所有后续内容推送到它们下面。现在，在第一个div之后有200个像素的空白空间，允许其他内容简单地环绕它

---

增加浮动div的宽度可能不适合您的布局，因此

clear：两者都可以

是这种情况下最典型的一种。您需要在两个div下面添加一个div，并使用

clear:both如其他人所建议的，或者您可以添加
clear:两者到以下
元素。
不需要，只是宽度问题。我不同意。设置为并排浮动的div应始终位于容器中。无论是那个元素还是下一个元素都应该有明确的含义：两者都有；设置如果没有这个，各种各样的恐惧都会发生。这是有道理的，我通常会这样做，我只是说作为一个补丁。我更喜欢
clear：两者都有因为它允许内容确定高度而不是隐藏任何溢出。@Sparky672实际溢出：隐藏将使其展开以适应浮动元素的高度。完全相同的效果。无论是包含布局还是内容本身，此类内容的宽度总是会发生变化。更不用说，根据doctype的不同，不同的浏览器计算总宽度的方式也不同。以这种方式修复它将需要大量的重新填充。使用周围溢出：隐藏；或者第三个要素是明确的：两者都有；