<!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>
我的问题：为什么红色块的高度和灰色块的高度相等？
最佳答案
这基本上是how a clearfix works。
红色块向左浮动，而灰色块完全不浮动。您有一个清除div作为灰色div的子级；由于该孩子正在尝试清除向左浮动的红色块，因此需要将其定位在红色块的最底部。由于需要向下移动，因此将灰色块的高度向下拉，以使两个块的高度相等。