Рубрика CSS

Всё о свойстве float

Что такое «float»?

Float в CSS является свойством позиционирования. Для того чтобы понять его цели и происхождение, можно сравнить его с полиграфическим дизайном. При подготовке к печати изображения позиционируют так, чтобы текст как бы обтекал их по мере необходимости. Обычно это называется «обтекание текстом». Вот пример.

В программах для разметки страниц, блоки с текстом могут обтекать изображения, а могут игнорировать обтекание. При игнорировании, текст будет располагаться над изображением, как будто оно отсутствуют. Это главное отличие между тем, будет ли изображение частью потока страницы или нет. В веб-дизайне много сходств.

В веб-дизайне элементы страницы со свойством float ведут себя практически точно так же, как и изображения в полиграфическом дизайне, где текст обтекает их. Элементы со свойством float являются частью потока веб-страницы. Но если элементы страницы используют абсолютное позиционирование, то все обстоит иначе. Абсолютно позиционированные элементы удаляются из потока веб-страницы, подобно тому, когда текст в полиграфическом дизайне игнорирует обтекание изображения. Абсолютно позиционированные элементы не будут влиять на позицию других элементов, а другие элементы не будут затрагивать их, при этом не важно касаются они друг друга или нет.

Применение свойства float в CSS происходит следующим образом:

#sidebar {
float: right;
}

Всего имеется 4 значения для свойства float. Left и Right – это float элементы, которые указывают направление. None (значение по умолчанию)  гарантирует, что элемент не будет «плавать» и Inherit – элемент, который унаследует значение родительского элемента.

Для чего можно использовать float?

Помимо простого примера обтекания текстом изображения, свойство float можно использовать для создания макета целого веб-сайта.

Свойство float также полезно для элементов небольших размеров. Возьмем к примеру эту небольшую область веб-страницы, в которой мы используем свойство float для аватара. При изменении размера изображения, размер текста будет подогнан к размеру самого изображения.

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

Отмена свойства float

Для float родственное свойство – это clear. Элемент со свойством clear отображается ниже элемента со свойством float. В качестве пояснения приведу иллюстрированный пример.

В приведенном выше примере сайт-бар находится справа (float: right) и его высота меньше основной части контента. При этом Footer занимает свободное пространство, как это требует свойство float. Чтобы решить эту проблему, нужно установить свойство clear, это будет гарантировать, что footer разместится ниже float-элементов.

#footer {
clear: both;
}

Clear имеет 4 значения. Both – используется в большинстве случаев и применяется для отмены каждого из направлений. Left и Right  используются для отмены float одного из направлений. None значение по умолчанию, которое обычно не применяется, за исключением случаев, если нужно отменить свойство clear. Inherit было бы пятым значением, но оно не поддерживается в Internet Explorer. Отмена одного левого или правого float на практике применяется редко.

Большой «коллапс»

Одна из наиболее удивительных вещей в работе с float – это то, что оно может воздействовать на родительский элемент. Если этот исходный элемент содержит только float-элементы, то высота его будет нулевой. Это не всегда заметно, если родительский элемент не содержит видимый фон, но это важно знать.

В качестве альтернативы могу показать такой пример. Какой из них лучше? Рассмотрим этот пример.

Если блочный элемент, который расположен сверху, будет автоматически увеличиваться, чтобы поместить float-элементы, мы получим неестественный разрыв в тексте между параграфами, без практического способа устранить это. Если бы это было так, дизайнеры жаловались чаще на это поведение, чем на «коллапс».
Поэтому «коллапс» почти  всегда необходим, чтобы предотвратить проблемы в верстке. Чтобы не допускать подобного поведения, нужно добавить элемент, отменяющий float после float-элементов, но до закрытия родительского контейнера.

Способы отмены Float

Если вы знаете, что следом за элементом будет выводиться другой элемент, вы можете применить свойство clear: both, как показано в примере выше. Это идеальный вариант, так как он не нуждается в фантастических хаках и в дополнительных элементах. Однако бывают случаи, когда данный способ не работает. Поэтому необходимо иметь запасной вариант.

1. Пустой div метод – в буквальном смысле пустой div <div style=»clear: both;»></div>. Иногда может использоваться <br /> элемент или какой-нибудь другой, но div является более распространенным, поскольку он по умолчанию не имеет стиля, не имеет специальную функцию и вряд ли к нему будет применен общий стиль через CSS. Этим методом пренебрегают сторонники семантической разметки, поскольку его присутствие не имеет контекстного значения на страницах и применяется исключительно для дизайна. Конечно, в каком-то смысле они правы, но он лишь делает свою работу и никому не вредит.
2. Метод Overflow. Основан на том, чтобы установить свойство overflow родительскому элементу. Если это свойство установить в auto или hidden, то родительский элемент будет увеличиваться, вмещая в себе float и clear элементы. Этот метод может быть семантически правильным, поскольку не требует дополнительных элементов. Также имейте в виду, что свойство overflow специализировано для отмены float. Будьте  осторожны, чтобы не скрыть контент или спровоцировать нежелательные скролл-бары.
3. Метод простой очистки. Использует псевдо селектор CSS :after и отменяет float. Это лучше, чем установка overflow для родительского элемента вы просто применяете дополнительный класс “clearfix”. Затем применяете этот код в CSS:

.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

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

Для лучшего визуального представления блочные элементы можно объединить, например, чтобы каждая группа элементов начиналась с новой строки, также задаем им соответствующие цвета. Мы можем использовать метод overflow, либо метод простой отчистки, если у каждой цветовой группы имеется родительский элемент. Или мы можем использовать метод пустого div между каждой из групп. Три элемента-контейнера div, или три пустых div, что лучше решать вам.

Проблемы с float

При использовании свойства Float могут возникать ошибки. Большая часть ошибок  пришла вместе с IE 6. Поскольку все больше и больше дизайнеров отказываются от поддержки IE 6, вы можете не волноваться на счет этой проблемы, но для людей, которым не все равно, вот краткий список.

1. Pushdown (выталкивание) возникает, когда элемент внутри float-элемента шире (как правило, это изображение). Большинство браузеров выводит изображение вне float-элемента. Однако IE расширяет float-элемент, содержащий изображение, что приводит к искажению дизайна. Типичным примером является  изображение, которое выбивается из основного контента и «толкает» сайд-бар вниз. Для решения данной проблемы необходимо убедиться в отсутствии изображений, не подходящих по ширине, иначе используйте свойство overflow: hidden;, чтобы обрезать выступающую часть.



2. Двойной внешний отступ. Еще одна вещь, которую необходимо помнить при работе с IE 6. Суть её заключается в использовании внешнего отступа в том же направлении, как и у float-элемента, что приводит к удвоению внешнего отступа. Для решения данной проблемы необходимо установить float-элементу свойство display: inline;  не беспокойтесь, элемент останется блочным.
3. Трех-пиксельный отступ (3px Jog). Сводится к тому, что текст расположенный рядом с float-элементом, внезапно спускается на 3 пикселя, подобно силовому полю вокруг  float-элемента. Для решения данной проблемы необходимо установить ширину и высоту пострадавшему тексту.
4. В IE 7  имеется Bottom Margin Bug (ошибка нижнего внешнего отступа). Если родительский float-элемент внутри себя имеет еще один float-элемент, то нижний отступ дочернего элемента игнорируется. Чтобы не столкнуться с данной проблемой, необходимо  использовать внутренний отступ  родительского элемента.

Альтернативы

Если вам нужно обтекание текста вокруг изображения, то действительно нет никаких альтернатив для float. Говоря об этом, проверить это довольно просто для обтекания текстом неправильной формы. Но для макета страницы определенно есть выбор.  Существуют методики позволяющие с помощью абсолютного позиционирования придавать гибкость  float-элементам.

В CSS3 есть модуль разметки шаблона (Template Layout Module), который представит достойную альтернативу float.

Источник: www.css-tricks.com.
Перевод: Администратор сайта explorer-soft.com.