css - なぜクリアしてもクリアしないのですか？

Question

私はいくつかの問題に遭遇しています。div.clear が機能しない理由がわかりません。ご覧のとおり、次のボタンは赤い div で囲まれている必要があります。ソースを確認してください。

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

score 2 · Accepted Answer

overflow:autoボタンに追加するだけです。それは動作します - 私はそれをテストしました。

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

これが発生した理由は、高さが設定されていないため、コンテンツがボタン上で折りたたまれていたためです。設定overflow:autoにより、親に子が強制的に含まれるようになります。

score 1 · Accepted Answer

あなたはこれをあなたmain.cssの行に持っています126

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

このfloat: left;ルールが問題を引き起こしています。これから削除するfloat: left;と、想定どおりに機能します。

スクリーンショット:

ここに画像の説明を入力

2 に答える 2