css - 为什么清不清？

Question

我遇到了一些问题。我不知道为什么我的 div.clear 不能完成这项工作。如您所见，按钮 next 应该被红色 div 包围。请检查我的来源谢谢！

http://www.w3dominik.com/x/vocabito/dashboard.php

<div id="buttonsx">
                    <div id="next">next</div>
                    <div class="clear">&nbsp;</div>
                </div>

Answer 1

只需添加overflow:auto到按钮。它有效 - 我测试了它。

#buttonsx {
    padding: 10px;
    color: #fff;
    background-color: red;
    overflow: auto;
}

发生这种情况的原因是内容在按钮上折叠，因为它没有设置高度。设置overflow:auto将强制父母包含孩子。

Answer 2

你有这个在你main.css的行126

#buttonsx>div {
    border-radius: 5px;
    display: inline-block;
    float: left; /* <-- this is the problem */
}

此float: left;规则导致了问题，如果您从中删除float: left;，它将按预期工作。

截图：