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>

enter image description here

My question: why the red block's height and gray block's height equality ?

Fredy
  • 2,840
  • 6
  • 29
  • 40
Shuxiang
  • 178
  • 1
  • 5

1 Answers1

4

This is basically how a clearfix works.

The red block is floating to the left while the gray block isn't floating at all. You have a clearing div as a child of the gray div; since that child is trying to clear the left-floating red block, it needs to be positioned starting at the very bottom of the red block. Because it needs to be moved down, it pulls the height of the gray block down, such that the two blocks become equal in height.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • why the child clear the left-floating red block, the child's containing blocks is gray block? how the child clear the parent's float? thanks! – Shuxiang Nov 28 '12 at 10:28
  • It doesn't matter that it's inside the gray block - once it sees a floating element somewhere before it, it must clear that float. – BoltClock Nov 28 '12 at 10:37