Div出现在另一个容器/部分中的div前面

Question

我正在网站上工作，当时我有四个部分，里面有各种div，但是第三部分的内容是第二部分的重叠内容，就像第二部分的高度不会自动调整为内容。

由于有很多代码，我很难在jsfiddle中展示整个问题，所以可以在www.nickcookweb.co.uk/test看到这个问题的实例，其中＆＃39 ;博客＆＃39;标题部分与上一部分的服务网格重叠。

（PS。我知道还有很多其他问题......仍在研究它们，很可能会发布更多问题）

Answer 1

你的所有.service div都悬空了，从不清除它们。

您可以执行以下操作来解决它......

<div id="servicesGrid">

   <div class="service"></div>
   <div class="service"></div>
   <!-- etc... -->

   <div style="clear: both;"></div> <!-- Solution -->
</div>

默认情况下，div会扩展以适合其内容，float会更改此行为。如果没有明确的话，它会假装那些浮动元素甚至不存在。我们可以通过在最后一个浮动元素之后执行clear: both;来解决和解决这个问题。

Answer 2

我将servicesGrid的位置更改为静态，这似乎可以解决问题：

#servicesGrid {
    position: static;
}

编辑：以下是有类似问题的人：Floats inside absolute positioned div