使用伪元素在特定类之后添加清除答案

【问题标题】：Use Pseudo-elements to add clear both after specific class使用伪元素在特定类之后添加清除
【发布时间】：2016-01-03 14:27:58
【问题描述】：

我想通过使用::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>

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

【问题讨论】：

Using :after to clear floating elements的可能重复
@CoolGuy 我以前看过这个问题，我编辑了 .value:after 但我不工作。
这不是重复的，因为 OP 已经尝试过类似的方法并询问为什么它对他们不起作用。
您需要将clear:both 设置为父div `:before'。

标签： html css

【解决方案1】：

问题在于用于清除浮动的元素。尽管.value:after 听起来好像伪元素添加在带有class='value' 的元素之后，但实际上它并没有完全添加在该元素之后。伪元素实际上是.value 元素的子元素，并且添加在该元素的内容之后。因此，被它清除的浮动是在元素内m>。

当我们使用 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。这将使元素浮动并清除先前的浮动。

.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>

【讨论】：