Home/ Questions/Q 8907061
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:48:47+00:00

<!Doctype html> <html> <head> <meta charset=utf-8 /> <title>test</title> </head> <body> <div style=float: left; width:

  • 0
<!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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0