Divが別のコンテナ/セクション内のdivの前に表示されます

Question

私は4つのセクションの中にさまざまなdivがありますが、3番目のコンテンツは2番目のコンテンツと重複しています2番目の高さはコンテンツに自動的に調整されません。

jsfiddleでこの問題全体を実証するのは難しいため、この問題の実例はwww.nickcookweb.co.uk/testで見ることができます。ここでは 'Blog 'タイトルセクションは前のセクションのサービスグリッドと重複しています。

（PS。私はまだそれらに取り組んで、最も可能性の高い多くの質問を投稿します...他の多くの問題もある知っています）あなたはすべてのあなたの.service divを浮動している

Answer 1

し、それらをクリアすることはありません。

div要素がfloat変更、デフォルトではその内容に合わせて、この動作を展開しますが、あなたはそれを解決するには、次の...

<div id="servicesGrid"> 

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

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

を行うことができます。はっきりしないと、浮かれた要素がそこに存在しないというふりをします。我々は最後の浮動小数点数の後にclear: both;を実行することで、この問題に対処し解決することができます。

Answer 2

私は静的にservicesGridの位置を変更し、それがトリックを行うように見えた：

#servicesGrid { 
    position: static; 
} 

編集を：ここでは非常に同様の問題を持つ人である：Floats inside absolute positioned div