Wo soll ich das "clear: both" setzen?

Question

Ich habe Mühe zu verstehen, welche die richtige Position der clear:both; im Code sein sollte.

<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> 
<div style="clear:both;"></div> <!-- second option --> 
<div class="second-row"> 
    etc.... 
</div> 

Answer 1

Die "erste Option" in Ihrem Beispiel wird empfohlen. Wenn Sie die Rahmen für den Hintergrund z. .first-row{border:1px solid red;} können Sie deutlich sehen, dass der Container nicht kollabiert.

In der "zweiten Option" löscht es nur den Float, der über sich selbst ist, so dass "zweite Zeile" auf einer neuen Zeile beginnt.

In der Tat ist die Verwendung der Pseudo-Element :after die beliebteste Clearfix-Methode heutzutage. Wie Sie sehen können, wird es direkt vor dem Schließen des Tags des Containers platziert, wie bei der ersten Option.

.first-row:after { 
    content: ""; 
    clear: both; 
    display: table; 
}