html - 使用伪元素在特定类之后添加 clear both

Question

我想通过使用 ::after 将 clear: both 添加到特定元素，我希望它是这样的。

.name {
  width: 120px;
  float: left;
}
.value {
  width: 200px;
  float: left;
}
.clear {
  clear: both;
}

<div>
  <div class="name">Name</div>
  <div class="value">Value</div>
  <div class="clear"></div>
  <div class="name">Name</div>
  <div class="value">Value</div>
  <div class="clear"></div>
</div>

但是当我删除空的 div 并将伪元素 :after 添加到 .value 时，它并没有像我预期的那样工作。

.name {
  width: 120px;
  float: left;
}
.value {
  width: 200px;
  float: left;
}
.value:after {
  content: '';
  display: block;
  clear: both;
}

<div>
  <div class="name">Name</div>
  <div class="value">Value</div>
  <div class="name">Name</div>
  <div class="value">Value</div>
</div>

那么为什么它不起作用呢？

Answer 1

问题出在用于清除 float 的元素上。尽管 .value:after 听起来好像伪元素添加在 具有 class='value' 的元素之后，但事实并非如此实际上恰好添加在该元素之后。伪元素实际上是 .value 元素的子元素，并被添加到该元素的内容之后。因此，被它清除的 float 在元素内。

当我们使用 Dev Tools 或 Inspector 时，下面是实际看到的结构。

<div>
  <div class="name">Name</div>
  <div class="value">Value
      ::after <!-- This is where the pseudo-element is actually inserted -->
  </div>
  <div class="name">Name</div>
  <div class="value">Value</div>
</div>

.name {
  width: 120px;
  float: left;
}
.value {
  width: 200px;
  float: left;
}
.value:after {
  content: 'Some content';
  display: block;
  clear: both;
}

<div>
  <div class="name">Name</div>
  <div class="value">Value</div>
  <div class="name">Name</div>
  <div class="value">Value</div>
</div>

---

这种情况的解决方案是在每个 .name 元素选择器中添加 clear: both。这将使元素 float 并清除之前的 float 。

.name {
  width: 120px;
  float: left;
  clear: both;
}
.value {
  width: 200px;
  float: left;
}

<div>
  <div class="name">Name</div>
  <div class="value">Value</div>
  <div class="name">Name</div>
  <div class="value">Value</div>
</div>