html - 如何防止一个 DIV 位于另一个 DIV 之上？

Question

我很难让一个 div 不位于另一个 div 之上。我有以下内容

<div id="navbar">
    <div id="leftNavSection"></div>
    <div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>

随附的 CSS ......

#rightNavSection {
  float: right;
}

但是，当我在下方添加此 div 时，它与导航 div 在同一垂直平面上对齐。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>

这是说明问题的 JSFiddle — https://jsfiddle.net/z4rw9qj1/ .如果我向 nav div 添加固定高度(例如“height: 10px;”)，则不会发生叠加，但我不想添加固定高度，因为如果有人调整了他们的浏览器字体大小，或者我添加其他元素，然后外观被打破。有没有办法让下层 div 不践踏上层 div？

Answer 1

那是因为 float: right，如果在 header 上添加 overflow: hidden 就可以解决这个问题 DEMO

header {
  overflow: hidden;
}