testermaster testermaster - 1 year ago 83
CSS Question

Where should I put the "clear: both"?

I'm struggling to understand which should be the correct position of the

in the code.

<div class="first-row">
<div class="left-column" style="float:left;width:33%;"></div>
<div class="center-column" style="float:left;width:33%;"></div>
<div class="right-column" style="float:left;width:33%;"></div>
<div style="clear:both;"></div> <!-- first option -->
<div style="clear:both;"></div> <!-- second option -->
<div class="second-row">

Answer Source

The "first option" in your example is recommended. If you set the borders for background e.g. .first-row{border:1px solid red;} you will be able to see it clearly that it prevents the container to collapse.

In the "second option", it only clears the float that is above itself, so that "second-row" will start on a new line.

In fact, using the pseudo element :after is most popular clearfix method nowadays. As you can see it's placed right before closing tag of the container, same idea as "first option".

.first-row:after {
  content: "";
  clear: both;
  display: table;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download