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

Question

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

.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

问题在于用于清除浮动的元素。虽然.value:after听起来好像在元素{<1}}之后添加了，但实际上并没有在该元素之后添加。伪元素实际上是class='value'元素的子元素，并在该元素的内容之后添加。因此，被它清除的浮点数是元素中的。

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

.value

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此案例的解决方案只是在每个<div> <div class="name">Name</div> <div class="value">Value</div> <div class="name">Name</div> <div class="value">Value</div> </div>元素选择器中添加clear: both。这将浮动元素并清除先前的浮动。

＆＃13;

＆＃13;

.name

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;