Приемы очистка потока clearfix и class= clear - кратко

Привет, Вы узнаете о том , что такое приемы очистка потока clearfix, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое приемы очистка потока clearfix, class= clear - , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.

Имеем:

• блок-родитель
• плавающий блок, вложенный в блок-родитель
• текст (или блок, или что угодно), который будет обтекать плавающий блок (нужен для демонстрации)

HTML

1

2	Этот блок с float: left;

3	текст, который задаст высоту родителю

4

5	Это следующий блок в общем потоке

Вопросы:

1. какую высоту в данном случае будет иметь блок-родитель (div class="parent")?
2. где расположится блок (div class="nextStaticBlock"), помещенный под блок-родитель?

Правильные ответы на рисунке:

ожидалось, что следующий блок, будет расположен под блоком-родителем, высота которого будет равна высоте самого высокого дочернего блока (в данном примере высоте плавающего блока)

в реальности, следующий блок (в большинстве браузеров) действительно расположен под блоком-родителем, но высота родителя равна высоте статического (неплавающего) содержимого

 

Старое решение

Очищаем поток, используя дополнительный элемент, помещенный в конце блока родителя со свойством или атрибутом clear (

 

<div style="clear: both;> или
):

 

HTML

1	<div class="parent">

2	<div class="floatBlock">Этот блок с float: left;</div>

3	текст, который задаст высоту родителю

4	<div style="clear: both;"></div>

5

</div>

6	<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

  Недостаток данного способа — появляется никому не нужный, портящий структурность и семантику кода элемент. Зачастую с единственным назначением — это очистить поток.

Новое решение

Очищаем поток, используя псевдоэлемент :after

HTML

1	<div class="parent">

2	<div class="floatBlock">Этот блок с float: left;</div>

3	текст, который задаст высоту родителю

4

</div>

5	<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

CSS:

CSS

1	.parent:after {

2	content: ".";

3	display: block;

4	height: 0;

5	clear: both;

6	visibility: hidden;

7

}

 — чтобы скрыть точку лучше использовать visibility: hidden вместо overflow: hidden, т.к. Об этом говорит сайт https://intellect.icu . в некоторых браузерах точка все же видна.

и для IE подключаем условными комментариями (рекомендуется) или с использованием хаков (не рекомендуется)

CSS

1

.parent {

2	zoom: 1; /* set hasLayout */

3	display: block; /* resets display for IE/Win */

4

}

 или просто

 

 

 

.clearfix:after {

 visibility: hidden;

 display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

Очищаем поток overflow: hidden

 

Так же для очистки потока есть более постой способ — добавить правило overflow: hidden родителю, который содержит плавающие элементы:

CSS

1

.parent {

2	overflow: hidden;

3	zoom: 1; /* for IE */

4

}

Демо пример. Метод более простой, но не всегда применим (например, когда родитель содержит абсолютно позиционируемые элементы, которые должны выходить за границы родителя. Пример — выпадающее меню).

Микро clearfix

 

Если не нужна поддержка IE6-7:

CSS

1	.parent:after {

2	content: "";

3	display: table;

4	clear: both;

5

}

Если нужна, тогда надежней использовать такой вариант:

CSS

01	/* For modern browsers */

02	.parent:before,

03	.parent:after {

04	content: "";

05	display: table;

06

}

07	.parent:after {

08	clear: both;

09

}

10

11	/* для IE6-7 */

12

.parent {

13

zoom: 1;

14

}

Анализ данных, представленных в статье про приемы очистка потока clearfix, подтверждает эффективность применения современных технологий для обеспечения инновационного развития и улучшения качества жизни в различных сферах. Надеюсь, что теперь ты понял что такое приемы очистка потока clearfix, class= clear - и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3

Из статьи мы узнали кратко, но содержательно про приемы очистка потока clearfix

Ответы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.