css - 如何强制 div 位于不在其间的其他两个 div 的下方？

Question

尽管之前有人在这里问过这个问题，但我还是无法弄清楚这一点，这让我感到非常愚蠢。但是谁能解释为什么我不能让 slider div 直接位于图像 + map 和文本内容 div 的下方(这两个应该在顶部，一个在左边，一个在右边)？很明显，我如何使用绝对定位是不正确的。任何建议都会很棒。谢谢。

<style> 

#container .container_body .images {
    float: left;
}

#container .container_body .content {
    float: right;
    width: 355px;
}

#container .container_body {
    margin-bottom: 35px;
    background-color: pink;
    font-size: 22px;
}

.slider-container { 
    background-color: red;
    /*position: absolute;*/
}

.content {
    background-color: blue;
}

.images {
    background-color: green;
    /*position: absolute;*/
}

</style> <!-- /.style -->


<!-- container ALL -->
<div id="container">

  <!-- container BODY -->
  <div class="container_body">
    <p>container body here.</p>

    <!-- IMAGES -->
    <div class="images">
        <p>images here.</p>
    </div> <!-- /.images -->

    <!-- TEXT CONTENT -->
    <div class="content" style="width: 366px;">
          <p>text content here.</p>

          <!-- map -->
        <div class="map">
            <p>map media here.</p>
        </div><!-- /.map -->

    </div><!-- /.content -->
  </div> <!-- /.container_body -->

  <div class="slider-container"><!-- slider -->
     <p>slider here.</p>
  </div><!-- /.slider -->

</div><!-- /#container -->

Answer 1

当你有 float 的元素时，你必须应用 clear属性到你想坐在 float 元素下的元素。比如，

.slider-container {
   clear:both;
}

both 的值只是表示将元素向下移动以清除both float 的左右元素。在上面的示例中，这应该涵盖 float:left; 和 float:right; 声明。

通过将上述样式应用于您现有的标记， slider 将按预期位于图像和文本下方。这是我的 jsfiddle. 的副本