html - 使用 :after 或 ::after 的 Clearfix 不适用于我的彩色框

Question

如何修复在“Bluebox”之后无法正常工作的 clearfix，我不想创建新的差异，我想使用 :after 或 ::After 在蓝色之后注入代码/清除。明确的：如果我只是将它放在橙色框下，这两个命令都可以工作，但是我可以让它在没有 div 的 bluebox 之后发生吗？

#wrapper {
  background: #000000;
  height: 960px;
  padding 20px;
}

#bluebox {
  background: blue;
  float: left;
}

#bluebox:after {
  content: '';
  display: block;
  clear: both;
}

#orangebox {
  background: orange;
  float: left;
}

#greenbox {
  background: green;
  float: left;
}

.box {
  height: 100px;
  width: 100px;
}

<div id=wrapper>
  <div id=bluebox class=box></div>
  <div id=orangebox class=box></div>
  <div id=greenbox class=box></div>
</div>

标签： htmlcss

Answer 1

使用浮点数并清除它们在过去十年中非常流行-您应该研究一种更流行的布局方法-例如-flex，它允许与您拥有的布局相同，而无需清除浮点数。

请注意，我在代码中添加了 display: flex 和 justify-content: flex-start - 所有这些都是允许 flexbox 布局并从左侧开始布局（如果您使用 flex-end - 那么它会将框对齐到正确的）。

#wrapper {
  background: #000000;
  height: 960px;
  padding 20px;
  display: flex;
  justify-content: flex-start;
}

#bluebox {
  background: blue;
}

#orangebox {
  background: orange;
}

#greenbox {
  background: green;
}

.box {
  height: 100px;
  width: 100px;
}

<div id=wrapper>
  <div id="bluebox" class="box"></div>
  <div id="orangebox" class="box"></div>
  <div id="greenbox" class="box"></div>
</div>