Описание тега css-float

Описание тега Вопросы с тегом
Размещение элементов слева или справа от их контейнеров с помощью атрибута CSS float.

Добавление float: left или float: rightк элементу подталкивает его как можно дальше к выбранной стороне потока документов. Несколько элементов, плавающих в одном направлении, будут складываться друг на друга. Плавающий чрезвычайно полезен для размещения элементов на странице, но также может создать несколько интересных проблем с макетом. Вclear свойство - связанный атрибут, который иногда используется для решения проблем с плавающей запятой.

Плавающий вправо - обратный эффект

При перемещении нескольких элементов в правую часть документа вам придется перечислить их в обратном порядке, в котором они должны отображаться. Это происходит потому, что первый элемент, найденный в документе, сначала перемещается вправо. Следующий элемент, который перемещается вправо, укладывается поверх предыдущего элемента, располагаясь слева. Каждый элемент после этого складывается слева поверх других.

Обратный эффект также частично распространяется на элементы, которые перемещаются вправо на одной строке с элементами, перемещаемыми влево. Любые элементы, которые вы хотите разместить прямо справа от плавающих влево элементов, должны быть размещены до тех, которые перемещаются влево. В противном случае элементы с плавающей точкой вправо могут оказаться в строке ниже.

Удаление из потока документа

Одна из основных проблем, с которыми обычно сталкиваются разработчики, заключается в том, что плавающие элементы удаляются из потока документа. Это значит, что они вообще не занимают места ни по вертикали, ни по горизонтали. Другие элементы будут расширяться за ними, и только текст будет обтекать их. В частности, вы увидите плавающее содержимое, расширяющееся за край своего родительского контейнера. Возьмем, к примеру, зеленый контейнер с отступом 20 пикселей, который содержит красный контейнер, плавающий влево:

Плавающий пример

Поскольку плавающий элемент фактически не занимает места, родительский контейнер имеет вычисленный height из 0, плюс 40px из padding(сверху и снизу), что создает этот неблагоприятный эффект. Однако исправить это просто. Вы можете добавитьoverflow: hidden в родительский контейнер (что будет работать в большинстве случаев) или использовать четкое исправление для родительского элемента (только для браузеров, совместимых с CSS3).

.parent::after {
    content: "";
    clear: both;
    display: block;
    font-size: 0;
}

Дополнительную информацию см. В вики-странице тегов псевдоэлементов после::after селектор.

Очистка плавающих элементов

Вы можете очистить элементы, которые перемещаются в left, right, или bothстороны. Имейте в виду, что очистка плавающих элементов приведет к удалению всех элементов с указанных сторон. Вы не можете очищать только один или два элемента за раз с помощью этого свойства. Кроме того, вы должны иметь в виду, что это повлияет только на те элементы, которые фактически перемещаются в этом направлении. В случае, когда элемент, плавающий влево, укладывается между двумя другими элементами, плавающими влево, вы не можете применитьclear: right к этому элементу, чтобы очистить левый плавающий элемент, который уложен справа от него.

Ссылки

Дополнительная информация