float¶
Свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Когда значение свойства float равно none , элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Демо¶
Позиционирование
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11
/* Keyword values */ float: left; float: right; float: none; float: inline-start; /* Только Firefox 55+ */ float: inline-end; /* Только Firefox 55+ */ /* Global values */ float: inherit; float: initial; float: unset; Значения¶
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
Обтекание элемента не задаётся.
float: none; Применяется к: Ко всем элементам (за исключением абсолютно позиционированных)
Спецификации¶
- CSS Logical Properties Level 1
- CSS Basic Box Model
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
html> head> meta charset="utf-8" /> title>floattitle> style> .pull-left float: left; /* Обтекание блока по правому краю */ padding-right: 10px; > style> head> body> div class="pull-left"> img src="image/figure.jpg" alt="" /> div> p> Бихевиоризм, как бы это ни казалось парадоксальным, просветляет сублимированный стимул, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей. p> body> html> Float css что это
Float — это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст «обтекал» их. Обычно это так и называется: «обтекание текстом».
В программах для вёрстки страниц, элементы с текстом, могут учитывать изображения, а также и игнорировать их. В случае если они будут проигнорированы, текст будет отображаться над картинками, как будто их и нет. Это главная разница между тем, являются ли изображения частью основного потока страницы, или нет. Веб-дизайн очень похож.
В веб-дизайне, элементы страницы с установленным свойством float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.
Установка свойства float происходит следующим образом:
#sidebar
Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента.
Для чего можно использовать float?
Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.
Свойство float также полезно и в меньших масштабах. Для примера рассмотрим маленькую область на странице сайта. Допустим вы используете float для аватара, при изменении размера изображения, размер текста будет подогнан в соответствии с изображением.
Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.
Отмена свойства float
Для float, родственное свойство — clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.
В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.
#footer
Свойство clear может принимать четыре значения. Both, наиболее используемое, применяется для отмены float каждого из направлений. Left и Right — используются для отмены float одного из направлений. None — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но, безусловно, имеет свои цели.
Большой коллапс
Ещё одна удивительная вещь при работе со свойством float — это то, что его использование может влиять на родительский элемент. Если такой элемент содержит только float-элементы, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.
Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:
Если блочный элемент, располагающийся наверху, будет автоматически увеличиваться, чтобы вместить все float-элементы, то мы получим неестественный разрыв в тексте между параграфами, без всякой возможности это исправить. Если бы было именно так, наши дизайнеры жаловались бы гораздо чаще такому поведению, чем схлопыванию.
Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить трудности в вёрстке. Для того чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-элементов, но до закрытия родительского элемента.
Способы отмены float
Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both;, как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.
- Метод пустого div-а. Используется, в буквальном смысле, пустой div. . Иногда на его месте может использоваться элемент
или какой-нибудь другой, но div используется чаще всего, потому что по умолчанию у него нет никакого стиля, нет особого назначения и вряд ли к нему применён общий стиль через CSS. Этот метод может не нравится любителям семантически чистой разметки, поскольку присутствие пустого div-а не имеет контекстного значения и размещён на странице только из соображений дизайна. Конечно, строго говоря, они правы, но он делает свою работу и никому не вредит. - Метод overflow. Основан на том, что родительскому элементу необходимо установить свойство overflow. Если значение этого свойства установлено в auto или hidden, то родительский элемент увеличится, чтобы вместить в себя все float-элементы. Этот метод выглядит более семантически правильным, поскольку не требует дополнительных элементов. Однако, если вы соберётесь использовать ещё один div, только для того чтобы использовать этот подход (имеется в виду родительский div), то это будет то же самое, что предыдущий пример с добавлением пустого div-а. Кроме того, помните, что свойство overflow предназначено для других целей. Будьте аккуратны и не допустите, что часть контента у вас пропадёт, либо появятся никому не нужные скролл-бары.
- Метод простой очистки. Этот метод использует замечательный псевдо селектор CSS — :after. Гораздо лучше чем использование overflow для родительского элемента. Вы просто устанавливаете ему дополнительный класс, объявленный, например, так:
.clearfix:after
И, как вы понимаете, каждый из способов используется в различных ситуациях. Возьмём, к примеру, сетку из блочных элементов, отличающихся типами.
Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div-а между каждой из групп. Три элемента-контейнера, или три пустых div-а, что лучше для вашей задачи — решать вам.
Проблемы с float
Float часто стараются обходить, поскольку работать с ними надо очень аккуратно. Большинство ошибок пришло вместе с IE6. Поскольку всё больше и больше веб-дизайнеров отказываются от поддержки IE6, то вас могут и не волновать эти проблемы. Но для тех, кому не всё равно, вот краткий список.
- «Выталкивание» (pushdown). Возникает когда элемент внутри float-элемента оказывается шире его (обычно это изображения). Большинство браузеров обработает такие элементы вне float-структуры и вёрстка не будет сломана. IE расширит элемент, чтобы изображение влезло, зачастую это ломает дизайн. На картинке представлен пример, как изображение торчит из основного контента и таким образом «выталкивает» сайд-бар вниз. Самый просто способ избежать этого — это проверить что все ваши изображения подходят по ширине. Можно использовать overflow: hidden;, чтобы обрезать выступающую часть.
- Двойной внешний отступ. Ошибка проявляющаяся в IE6, в случае если вы устанавливаете внешний отступ в том же направлении, в котором у вас указан float. В этом случае отступ удваивается. Чтобы исправить это, необходимо установить плавающему (float) элементу свойство display: inline;, не беспокойтесь, элемент по прежнему будет блочным.
- Трёх-пиксельный прыжок (3px Jog). Ошибка, которая проявляется следующим образом: текст, который расположен рядом с float-элементом неожиданно съезжает на 3 пикселя. Чтобы избежать этого, необходимо установить ширину или высоту пострадавшему тексту.
- В IE7 существует Ошибка нижнего внешнего отступа (Bottom Margin Bug) — возникает когда элемент с установленным свойством float, содержит в себе ещё один float-элемент. В таких случаях, нижний внешний отступ дочернего элемента игнорируется. Для обхода этой проблемы необходимо использовать внутренний отступ родительского элемента, вместо внешнего отступа дочернего.
Альтернативы float
Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module), который в будущем предоставит достойную альтернативу float.
float
Иногда при вёрстке блока нужно, чтобы текст рядом с картинкой занимал всё оставшееся место, а после картинки располагался на всю ширину блока. Для таких ситуаций и создан float . Элемент, для которого указано это свойство, частично выходит из потока: все элементы блочного контекста, прописанные в коде после элемента с float , занимают его место, а элементы строчного контекста — «обтекают» его.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.element float: left;>.element float: left; >
В файле стилей пишем селектор элемента, который будем «обтекать», и указываем одно из трёх значений свойства:
- left — элемент встанет у левого края родительского блока.
- right — элемент встанет у правого края родительского блока.
- none — значение по умолчанию, элемент останется в потоке.
Если мы задаём какому-то элементу свойство float и пишем к нему, скажем, абзац текста, а ниже добавляем ещё один абзац, который по задумке должен быть независимым, то второй абзац всё ещё может «обтекать» элемент с float . Поэтому нам нужно прекратить влияние этого свойства, чтобы вернуться к обычному потоку документа. Для этого можно использовать так называемый «clearfix». После элемента, на котором мы хотим прекратить обтекание, можно вставить пустой элемент, обычно с классом clearfix , и прописать свойство clear :
.clearfix clear: both;>.clearfix clear: both; >
Также можно не вставлять отдельный элемент в разметку, а обойтись псевдоэлементом : : after — этот вариант предпочтительнее.
Несколько лет назад для похожей цели появилось значение flow — root для свойства display — оно как бы изолирует обтекание. Достаточно применить его к блоку, внутри которого есть элемент с float — и влияние float не будет распространяться вне этого блока. А относительно соседей он будет вести себя как обычный блочный элемент со статичным позиционированием.
Также для подобной изоляции можно указать блоку свойство overflow : hidden . Отличие состоит в том, что flow — root позволяет использовать свойство overflow : visible .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Применяя float к элементу, мы неявно делаем его блочным.
На практике
Скопировать ссылку «На практике» Скопировано
Лена Райан советует
Скопировать ссылку «Лена Райан советует» Скопировано
�� float не предназначен для создания сеток или табличной раскладки! Раньше не было другого способа разбить контент на колонки и поставить их рядом друг с другом. Но сейчас для этого есть флексы и гриды, а float используется только для «обтекания».
Плавающие элементы — CSS: Позиционирование элементов
Разобравшись с правилом position , мы переходим к следующему типу потока документа — плавающий поток. Его характерная черта — обтекание элементов. Это легко понять на примере журнальной верстки. Наиболее частой в ней является схема, когда внутри текста находится картинка, но не просто между строками текста, а слева или справа от него. Текст в данном случае как бы обтекает изображение, отсюда и такое название.
Для того, чтобы сменить поток на плавающий, используется CSS-правило float , которое принимает два основных значения:
По таким значениям ясно, что элемент может обтекаться как слева, так и справа. Попробуйте в примере выше сменить правило float: left на float: right , чтобы понять разницу. Для хорошего отображения также нужно будет отзеркалить отступы — то есть margin-right сменить на margin-left .
При использовании плавающего потока происходит необычная реакция браузера: на самом деле блок выдергивается из нормального потока документа. Точно так же, как и с использованием абсолютного позиционирования. Но почему блок рядом с плавающим элементом не наезжает на него? На самом деле наезжает, но текст знает о том, что рядом с ним есть плавающий элемент, и поэтому браузер автоматически сдвигает текст к границе плавающего элемента.
Такой эффект легко увидеть, если использовать свойство opacity , которое устанавливает прозрачность элемента, и отступ внутри блока.
До недавнего времени float использовали как основной инструмент для верстки сайтов. Именно с помощью этого правила создавали различные макеты в 2-3 колонки. Так как float изначально не создавался для таких целей, то этот процесс доставлял достаточно много проблем. С приходом flex и grid необходимость использовать плавающий поток для верстки макетов отпала, а значит его можно использовать для изначальных целей, а именно верстки текстов.
Интересной особенностью свойства float является то, что при его использовании любой элемент автоматически становится блочным. Это важно, если свойство используется на строчных элементах, таких как span . После установки значения float элементу можно выставлять значения ширины и высоты без дополнительного использования свойства display .
Очистка плавающего потока
При использовании свойства float для вёрстки макетов возникает много головной боли. Встречаются ситуации, при которых элементы плавающие, но необходимо изменить это или запретить блоку возможность обтекания другими элементами.
Для примера создадим вёрстку, где есть статья и несколько боковых плашек со свойством float :
Изучите вёрстку этого компонента и посмотрите, где располагаются разные блоки.
Если нужно запретить плашкам входить внутрь текста, то используется свойство clear . Оно устанавливается у элемента, который обтекает блок. Свойство принимает три основных значения:
- left — запретить обтекать блок слева
- right — запретить обтекать блок справа
- both — запретить обтекать блок со всех сторон
Запретим обтекать статью слева. Для этого блоку установим свойство clear: left :
main clear: left; > Если повторить это же действие, но для правого блока, то ничего не сработает:
main clear: right; > Эффект не сработал потому что блок со свойством float находится внутри статьи, а значит обтекается не весь блок, а только его часть. В этом случае свойство устанавливается у того элемента, который обтекает этот элемент. В примере это параграф. Установим свойство для него:
class="clear-right">Также у PHP недавно появились альтернативные рантаймы (среды выполнения), типа RoadRunner. Они позволяют срезать расходы ресурсов компаний на инициализацию приложения — на настройку и запуск всех необходимых библиотек и фреймворков. .clear-right clear: right; > Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях: