Какви методи за блокиране на течността (clearing) знаете и в кои ситуации се прилагат?

• overflow: hidden; или overflow: auto;: Прилага се към родителския елемент на елемент(и) с float. Създава нов блоков форматен контекст (BFC), като кара родителя да включва заобикалящите го елементи в своята височина.

Ситуация: Най-лесният начин, когато трябва да скриете съдържание, което излиза извън границите на елемента, или да приложите превъртане, но също така работи като метод за почистване.

• clear: both;: Прилага се към елемент, който не трябва да обгражда предишните елементи с float. Този елемент ще бъде разположен под всички заобикалящи го елементи.

Ситуация: Когато трябва да създадете нов ред или секция след елементи, които се обграждат взаимно.

• Методът clearfix (псевдоелементи ::after): Добавя псевдоелемент към родителския контейнер с определени свойства, имитирайки поведението на clear: both;, но без необходимостта да добавяте допълнителни HTML елементи.

.clearfix::after {
    content: ""; /* Задължително съдържание за показване на псевдоелемента */
    display: table; /* Създава нов блоков форматен контекст, като overflow: hidden; */
    clear: both; /* Прилага почистване */
}

Ситуация: Най-често срещаният и препоръчителен начин за почистване, който е чист и не нарушава структурата на маркировката. Прилага се към родителския елемент, съдържащ заобикалящите го елементи.

• Използване на display: flex или display: grid: Модерни методи за оформление, които не изискват обвиване за разполагане на елементите, като по този начин елиминират необходимостта от почистване. Ситуация: При създаване на сложни оформления или когато е необходим по-гъвкав контрол върху разположението на елементите.

• Добавяне на допълнителен елемент с clear: both; (стар метод): Вмъква празен HTML елемент след заобикалящите го елементи и му прилага clear: both;. Ситуация: Смята се за остарял и нежелан подход, тъй като добавя излишен HTML.