带有CSS clear的其他空<div>的含义是什么：两个属性？</div>

Question

我想知道是否有人知道我在我下载的有效html文件中找到的这个标签的含义。

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

提前感谢您的帮助。

Answer 1

它清除左右两侧的浮动，以便将内容返回到页面的主流中。

Official definition

Answer 2

这项技术被称为“spacer div” - 这篇文章已有十年之久，当时这是一个解决常见问题的好方法。它通常出现在这样的场景中：

<div class="container">
  <div style="float:left">
    ...
  <div style="float:left">
    ...
  </div>
  <div style="clear:both">&nbsp;</div>
</div>

内部div被浮动 - 如果你只是省略了“spacer div”，容器元素就不会完全包围它的内容（除非你自己浮动它，这通常是不切实际的）。某些较旧的浏览器（您知道哪一个）需要 以确保其在所有情况下都按预期运行，即简单的<div style="clear:both"/>并不总是有效 - 您真的需要{{1}用实际（虽然看不见和荒谬）的内容使其在任何地方都能正常工作。

这是解决常见问题的有效方法，但有更优雅的方法可以解决这个问题，例如： using the :after CSS pseudo class。这更优雅，因为它不需要我们添加语义上毫无价值的标记元素，这些元素仅用于样式目的。 Another great article使用不同的解决方案。

Answer 3

此标记不允许任何浮动放置在此标记的左侧或右侧。