html - 如何让左/右浮动 div 之间的空白留空？

Question

我遇到的问题可以通过以下最小示例得到最好的说明。

div.left {
  float: left;
}

div.right {
  float: right;
}

<div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div>underneath</div>

当我在 Chrome 中查看此 HTML 时，“underneath”出现在“left”和“right”之间，但我希望它在新的下方线。我应该怎么做才能最好地实现这一点？谢谢。

Answer 1

发生这种情况的原因是因为元素从正常流中移除，从而允许“下方”上升到该位置。解决这个问题的方法是将 clear:both 添加到下面的 div 中。这意味着 float 元素不能位于该单个 div 的右侧或左侧。

See this.