我应该把 "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 option"。如果您为背景设置边框，例如.first-row{border:1px solid red;}你会看的很清楚，防止容器倒塌

在"second option"中，它只清除它上面的浮点数，这样"second-row"就会换行

事实上，使用伪元素:after是现在最流行的clearfix方法。如您所见，它位于容器的关闭标记之前，与 "first option".

的想法相同

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

我应该把 "clear: both" 放在哪里？

Where should I put the "clear: both"?

css

css-float