兄弟姐妹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属性来避免浮动问题

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

在Css中添加这个

.clear{
  clear:both;
}