Использовать псевдоэлементы для добавления четких как после определенного класса

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 звучит так, как будто псевдоэлемент добавлен после элемент с class='value', он не точно добавлен после этого элемента в реальность. Псевдоэлемент является дочерним элементом .value и добавляется после содержимого этого элемента. Таким образом, поплавок, который очищается от него, составляет внутри элемента.

Когда мы используем Инструменты Dev или Инспектор, ниже показана фактическая структура, которая будет видна.

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

---

Раствор для этого случая просто добавить clear: both внутри каждого селектора .name элемента. Это будет плавать элемент, а также очистить предыдущие поплавки.

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