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 的子级；由于那个孩子正试图清除左浮动的红色块，它需要从红色块的最底部开始定位。因为需要向下移动，所以将灰色块的高度拉低，使两个块的高度相等。

于 2012-11-28T09:31:49.917 回答