どこに「clear：both」を入れるべきですか？

Question

コード内の正しい位置を教えてください。clear:both;を理解するのは難しいです。

<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

"最初のオプション"が推奨されています。背景に罫線を設定した場合など。 .first-row{border:1px solid red;}あなたは容器が崩壊するのをそれが明確に見ることができます。

「2番目のオプション」では、それ自身の上にあるフロートのみをクリアするので、2行目が新しい行で開始されます。

実際には、擬似要素:afterを使用しているのが、現在最も一般的なclearfix方式です。ご覧のとおり、コンテナのタグを閉じる前に配置されています。「最初のオプション」と同じ考えです。

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