html - CSS使div被压扁

Question

这是我的html

<div class="container midLevel" id="quizInfo">
    <div class="quizDetailsContainer floatLeft" id="quizDescriptionContainer">
        <text class="quizPresentationHeader" id="quizTitle">Test QuizTitle - replaced by handlebars</text>
        <text class="quizPresentationSubHeader" id="quizDescription">TestDescription- replaced by handlebars</text>
    </div>
    <div class="quizDetailsContainer floatRight" id="quizCreatorContainer">
        <a href="#" class="quizPresentationHeader" id="quizUserName">Test User Name</a>
        <div class="container lowLevel" id="quizUserContentContainer">
            <ol>
                <li>
                    <text class="quizPresentationText">Test User Content</text>
                </li>
                <li>
                    <text class="quizPresentationText">Test User Content</text>
                </li>
                <li>
                    <text class="quizPresentationText">Test User Content</text>
                </li>
            </ol>
        </div>
    </div>

</div>

这是我的CSS-

.container{
    background:#F2F2F2;
}

.midLevel{
    background:#BDBDBD;
    border-bottom-style:solid;
    border-width:2px;
}

.floatRight{
    float:right;
}
.floatLeft{
    float:left;
}

.clear{
    clear:both;
}

现在，.container midLevel 被“压扁”了，因为我看不到背景颜色，底部边框出现在顶部。为什么会这样？

Answer 1

您需要添加一个 <div class='clear'></div>在 .container 的结束标记之前。

之所以显示为“压扁”，是因为当您使用 float 时， float 的任何内容都不会被视为常规渲染流程的一部分。所以 .container 将其内部的 float div 视为不存在。