如何让浮动 left/right 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

试试这个

HTML

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

<div class="clear"></div>
<div>underneath</div>

CSS

.clear {
    clear:both;
}

Answer 2

发生这种情况的原因是因为元素从正常流中移除，这允许 'underneath' 上升到该位置。解决这个问题的方法是将 clear:both 添加到下方的 div。这意味着没有浮动元素可以在 dividual div.

的右边或左边

See this.