Html 错误的CSS呈现？

所以我正在为我的站点创建一个布局。我在显示我的站点条目/帖子时遇到问题。以下是我的源代码：

<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

上添加边框时，一切都变得很奇怪。下面是它在

中的外观。post{border bottom:10px；}

我已经用Chrome和Firefox对它进行了测试（因为我的大多数成员都在使用这些）。两者都会导致相同的怪异外观

---

这方面有什么帮助吗？

添加

溢出：自动发送到类中以获取
。post

我打赌post包含的浮动元素会溢出它的父div（在您的例子中是
.post
）。添加
溢出：自动
到您的
.post
div，它将通过清除浮动来包含浮动元素

CSS

完美的我花了好几个小时来处理HTML，实际上这是一个CSS问题。谢谢！另外，谢谢你的提醒。我在过去多次碰到这个问题，一开始就把头发拔了出来。我很高兴你在那之前解决了这个问题！：）
.post { 
  border-bottom:10px;
  overflow: auto;
}