为什么这个div没有突破到下一行呢？

Question

我有一个简单的内/外div问题，通过图片可能更容易解释。这是我的问题：

评论“这是一个诙谐的评论。”没有在其他2个标签下面分解。这是我的HTML：

                <div class="commentOuter">
                    <div class="commentAuthor">someauthor</div>
                    <div class="commentDate">17 minutes ago</div>
                    <div class="commentText"><span>This is a witty comment.</span></div>
                </div>

这是CSS：

.commentOuter
{
    border-radius: 4px;
    width: 100%;
    height: 20px;
    float: left;
    background-color: black;
    margin-top: 10px;
    padding: 5px;
}

.commentAuthor
{
    float: left;
    font-size: smaller;
    color: #68a5d9;
    display: block;
    height: 15px;
}

.commentDate
{
    float: left;
    font-size: smaller;
    margin-left: 5px;
    color: #AAA;
    display: block;
    height: 15px;
}

.commentText
{
    display: block;
    width: 100%;
}

我不明白当我在开发工具中突出显示元素时，div不会显示在标签下方，如下图所示：

非常感谢任何帮助。

Answer 1

因为你浮动了前两个元素。如果你需要将它移动到下面。使用明确的：

.commentText
{
   clear:both;
   display: block;
   width: 100%;
}

您还必须删除height元素的指定.outerComment。

仅仅因为它没有浮动，并不意味着它不会与其他元素相邻。

在此处查看更多内容：https://css-tricks.com/all-about-floats/