Question

<!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>

enter image description here

我的问题：为什么红色块的高度和灰色块的高度相等？

Answer 1

这基本上是how a clearfix works。

红色块向左浮动，而灰色块根本不浮动。你有一个清算div作为灰色div的孩子;因为那个孩子试图清除左浮动的红色块，所以需要从红色块的最底部开始定位。因为它需要向下移动，所以它会将灰色块的高度向下拉，这样两个块的高度就会相等。

clear float有一个奇怪的结果

1 个答案: