2 
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
    </head>
    <body>
        <div style="float: left; width: 200px; height: 150px;
background-color: red;"></div>
        <div style="background-color: gray;">
            <div style="clear: left;"></div>
        </div>
    </body>
</html>

ここに画像の説明を入力

私の質問: 赤いブロックの高さと灰色のブロックの高さが等しいのはなぜですか?

4

1 に答える 1

4

これは基本的に clearfix の仕組みです。

赤いブロックは左に浮いていますが、灰色のブロックはまったく浮いていません。灰色の div の子としてクリア div があります。その子は左に浮いている赤いブロックをクリアしようとしているので、赤いブロックの一番下から配置する必要があります。下に移動する必要があるため、2 つのブロックの高さが同じになるように、灰色のブロックの高さを引き下げます。

于 2012-11-28T09:31:49.917 に答える