CSSレンダリングが正しくありませんか？

Question

私は自分のサイトのレイアウトを作成しています。私は自分のサイトのエントリ/投稿を表示することに問題があります。私のソースコードは次のとおりです。

<div id="post-101" class="post-101 post type-post status-publish format-standard hentry category-Information category-Update"> 

    <h2 class="entry-title"> 
     <a href="http://localhost/bleachin/?p=101">TITLE</a> 
    </h2> 

    <div class="entry-content"> 
     CONTENT 
    </div><!-- .entry-content --> 

    <div class="entry-meta"> 
      META 
      </div><!-- .entry-meta --> 
    </div><!-- #post-101 --> 


<div id="post-100" class="post-100 post type-post status-publish format-standard hentry category-Information"> 

    <h2 class="entry-title"> 
     <a href="http://localhost/bleachin/?p=100">TITLE 2</a> 
    </h2> 

    <div class="entry-content"> 
     CONTENT 
    </div><!-- .entry-content --> 

    <div class="entry-meta"> 
     META 
    </div><!-- .entry-meta --> 
    </div><!-- #post-100 --> 

理論上は正しく動作するはずです。しかし、私が.postにボーダーを追加しようとすると、すべてが変わってしまいます。ここでは、それは（私のメンバーの大半は、これらを使用しているとして）私はChromeとFirefoxでそれをテストしている.post { border-bottom:10px; }

http://i.imgur.com/Nv5j8.png

でどのように見えるかです。どちらも同じ奇妙な外観になります。

これに関する助力？

Answer 1

.postのクラスにoverflow: auto;を追加します。

投稿には、親のdivをオーバーフローさせた浮動小数点数が含まれていることが考えられます（あなたの場合は.post）。 .post divにoverflow:auto;を追加し、浮動小数点数をクリアすることでfloat要素が含まれます。

CSS

.post { 
    border-bottom:10px; 
    overflow: auto; 
}