Чистка потоку в вьортці або Clearfix фокуси

Часто виникає потреба при верстанні макету, щоб батьківський блок обхоплював блок свого нащадка. Але дуже часто текст, картинка і т.д. наче в середині батьківського блоку, але блок (це переважно елемент з опцією display: block) його наче не помічає. Висота батьківського блоку, коли ми дивимося через інспектор так само дорівнює 0px. Як з цим боротися?

Отже маємо таку HTML конструкцію:

<div class="parent-block">
    <p>Я текстовий блок!</p>
    <p>Я другий текстовий блок!</p>
    <span>А я взагалі елемент inline - мене "батько" DIV не хоче бачити принципово</span> </div>

І перше, що  спадає на думку це вставити в самий низ блок

<div class="clearfix"></div>

попередньо дописавши в стилях для нього такі опції:

display: block;
height: 1px;
clear: both;

І все, наче проблема сама по собі вирішена, "батько" DIV усіх своїх дітей "побачив" та "обійняв". Але якщо такі маніпуляції потрібні для багатьох "батьків" та ще й на кількох сторінках?Ви скажите: Не питання використовуємо варіянт з опцією для всіх батьківських елементів:

overflow: auto;

Можливо так навіть краще, і тексту менше і не треба лізти в DOM-модель. Проте ви впевнені, що це не викличе бокові скрол-бари? Чи є певність що на різних пристроях такі "батьківські обійми" будуть виглядати адекватно? Я цього не певний. То існує ще один варіянт як полагодити "міжродинні стосунки" елементів DOM. Варто лиш прописати батьківському елементу псевдоелемент:

parent-block::after{
  content: '';
  display: block;
  clear: both;
  height: 1px;
}

Легко можна прописати таку правку всім елементам DOM моделі, при цьому без остраху щось зіпсувати на різних розмірах екрана:

*::after{
  content: '';
  display: block;
  clear: both;
  height: 1px;
}

Ну от і все що я в принципі хотів сказати... все інше замість слів краще виразить ця картинка: