html - 兄弟 div 在其他兄弟 div 的内部

Question

我的网站顶部有一个带有此 CSS 的菜单:

.menu {
width: 100%;
display: block;
float: left;
}

在里面，我有几个 div:

.menu .menu-item {
position: relative;
width: 260px;
float: left;
height: 430px;
}

一切都很好，但是当我尝试在菜单下方添加一个小的 div 时，使用这种 HTML 结构:

<div class="menu">
    <div class="menu-item">
    </div>
</div>
<div class="menu-bar">
</div>

和这个 CSS:

.menu-save {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%
    height: 20px;
}

使用此 CSS，我预期的输出是 menu-bar div 位于整个菜单下方，但我目前得到的是 menu-bar 位于内部menu 的顶部。我缺少什么 CSS？

Answer 1

我觉得使用 clear: both CSS 属性来避免 float 问题

<div class="menu">
  <div class="menu-item">
  </div>
</div>
 <div class="clear"></div>
<div class="menu-bar">

在 Css 中添加这个

.clear{
  clear:both;
}