какое свойство отменяет действие float
Способы отмены обтекания (float) в HTML
Прежде чем мы углубимся в методы очистки потока, давайте взглянем на проблему, которую мы пытаемся решить.
Типичный случай HTML верстки
Блоки .el-1 и .el-2 размещаются бок о бок внутри контейнера .container, и один элемент .main следует после .container:
Мы хотим, чтобы высота контейнера .container была равной высоте самого длинного из его дочерних элементов (т.е. либо .el-1, либо .el-2) и чтобы блок .main, чтобы был после блока .container.
Способ 1: метод старой школы
Который применим к нашей HTML верстке:
Наш демо-пример, реализуемый с помощью этого метода:
Если вас не волнует схлопывающийся контейнер, а только неправильно расположенный блок .main, то вы можете также поместить «очищающий поток» элемент br после контейнера. Но, если вы решите сделать так, то гораздо проще будет просто добавить свойство clear самому элементу .main.
Это простой и понятный метод. Тем не менее, в современной верстке практикуется отделение контента от стиля, поэтому лучше его не использовать.
Способ 2: свойство overflow
Используя свойство overflow в теге .container, мы можем заставить контейнер расшириться до высоты размещенных элементов. Наш CSS будет выглядеть следующим образом:
Наш HTML останется таким же, каким и был изначально, без дополнительных элементов. Вот, что мы получим в итоге:
К сожалению, у этого метода есть недостаток: любой дочерний элемент, который выступает за пределы контейнера, будет либо обрезан (в случае overflow: hidden; ), либо вызовет появление полос прокрутки (в случае overflow: auto; ).
Способ 3: класс “clearfix”
Изменим немного HTML код добавив к классу container класс clearfix:
Вот результат работы наешго новвого класса:
если вам не нужна поддержка браузеров ниже IE8, то наш код значительно сократится:
Способ 4: значение contain-floats для min-height
Спецификация W3C добавила новое значение для свойства min-height (и для других свойств min/max), для решения этой проблемы. Выглядит оно так:
Этот код дает практически тот же эффект, что и clearfix, или overflow, но с помощью одной строки кода и, к тому же он лишен тех недостатков, о которых мы говорили ранее. К сожалению, пока ни один из браузеров не поддерживает это свойство, так что просто имейте его ввиду.
Итак, у вас есть целый набор различных «clearfix» методов. Применение класса .clearfix стало стандартом, и я очень рекомендую использовать его вместо прежних двух методов.
float в CSS
За float стоит бесконечное море возможностей и куча проблем.
Другими словами, применение float не только модифицирует сам элемент, но и меняет его предков, родственников, потомков и следующие за ним элементы.
У float может быть только одно из трёх значений:
Использование float
Цель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.
Чтобы объяснить поведение, используем следующий пример: обтекаемое изображение внутри абзаца.
Проблемой вставки изображения в текст является то, что изображение занимает одну строку текста и тем самым увеличивает высоту строки, на которой находится. В нашем случае высота картинки 150px.
Затем мы хотим, чтобы текст обходил изображение:
Как вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:
Что делать, если текста недостаточно много?
Обтекаемое изображение выходит за рамки контейнера, потому что оно выше, чем жёлтый контейнер. И как вы можете увидеть, изображение даже визуально разбивает нижележащий абзац.
Я намеренно оставил эту ошибку вёрстки, чтобы продемонстрировать, почему float непредсказуем: он может даже повлиять на свои родственные элементы!
Поскольку float: left вынимает изображение из потока, высота жёлтого абзаца равна высоте его текста. Другими словами, высота изображения не учитывается.
float = block
К обтекаемым элементам автоматически применяется display: block и они в основном будут вести себя как блоки:
Очистка float
Вместо того, чтобы толкать текст рядом с изображением, clear: left выталкивает текст ниже изображения.
Какое свойство отменяет действие float
В программах для вёрстки страниц, элементы с текстом, могут учитывать изображения, а также и игнорировать их. В случае если они будут проигнорированы, текст будет отображаться над картинками, как будто их и нет. Это главная разница между тем, являются ли изображения частью основного потока страницы, или нет. Веб-дизайн очень похож.
В веб-дизайне, элементы страницы с установленным свойством float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.
Установка свойства float происходит следующим образом:
Для чего можно использовать float?
Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.
Свойство float также полезно и в меньших масштабах. Для примера рассмотрим маленькую область на странице сайта. Допустим вы используете float для аватара, при изменении размера изображения, размер текста будет подогнан в соответствии с изображением.
Отмена свойства float
В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.
Большой коллапс
Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:
Если блочный элемент, располагающийся наверху, будет автоматически увеличиваться, чтобы вместить все float-элементы, то мы получим неестественный разрыв в тексте между параграфами, без всякой возможности это исправить. Если бы было именно так, наши дизайнеры жаловались бы гораздо чаще такому поведению, чем схлопыванию.
Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить трудности в вёрстке. Для того чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-элементов, но до закрытия родительского элемента.
Способы отмены float
Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both;, как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.
И, как вы понимаете, каждый из способов используется в различных ситуациях. Возьмём, к примеру, сетку из блочных элементов, отличающихся типами.
Проблемы с float
Float часто стараются обходить, поскольку работать с ними надо очень аккуратно. Большинство ошибок пришло вместе с IE6. Поскольку всё больше и больше веб-дизайнеров отказываются от поддержки IE6, то вас могут и не волновать эти проблемы. Но для тех, кому не всё равно, вот краткий список.
Альтернативы float
Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module), который в будущем предоставит достойную альтернативу float.
CSS-свойство float. Плавающие элементы. Отмена обтекания
В этой статье мы рассмотрим не только варианты использования обтекания блоков текстом с помощью свойства float, но и способы отмены этого обтекания, т.к. это является не менее важной проблемой верстки с помощью плавающих блоков.
Значения свойства float
Допустимыми значениями css-свойства float являются:
Значение left сдвигает элемент к левому краю содержащего его контейнера, а окружающий текст обтекает его с правой стороны. Значение right сдвигает элемент к правому краю контейнера, а текст, находящийся рядом, обтекает его слева. Значение none отменяет обтекание, т.е. элемент не является плавающим. none является значением по умолчанию, поэтому все элементы обычно выстраиваются друг под другом (блочные элементы) или в строке текста (строчные и строчно-блочные элементы). Значение inherit наследует это свойство от родителя.
Обтекание элементов текстом
Использование плавающих блоков при верстке страницы
В шапке этой тестовой страницы использован следующий код:
Для основной части страницы код выглядит так:
И, наконец, в подвале этой нехитрой страницы использован следующий код:
Кстати, со способами создания верстки на основе css-свойства float вы можете познакомиться в статье «Виды 2-хколоночных макетов на основе свойства float».
Отмена обтекания
Для того чтобы посмотреть на изменения сначала отметьте пункт «Без отмены обтекания», а затем выберите любой другой. На самом деле вы должны увидеть, что глобальной визуальной разницы между 3-мя способами отмены обтекания нет.
Протестировать пример можно и даже желательно в отдельной вкладке.
Способ 1. Отмена обтекания с помощью свойства clear
Допустимые значения для css-свойства clear таковы:
Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки
Приветствую Вас, уважаемые читатели блога webcodius.ru. Сегодня мы продолжим изучать CSS и рассмотрим правила float и clear, имеющие важное значение при блочной верстке сайтов.
Создание плавающих контейнеров при помощи float
Изначально элементы веб-страницы располагаются на ней друг за другом, в том порядке, в котором определены в html-коде. Размещая в коде теги абзацев, заголовков, списков и др. на странице мы видим их в том же порядке. Но при помощи некоторых атрибутов css мы можем изменить этот порядок. Один из них float.
Правило float позволяет нам создавать так называемые плавающие элементы. То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки картинок на веб-страницу.
У этого правила может быть три возможных значения:
По умолчанию float использует значение none, то есть элементы не имеют никакого обтекания и идут по порядку друг за другом.
Значения left и right выравнивают элемент веб-страницы соответственно по левому и правому краю родительского элемента, а остальное содержимое будет обтекать его с противоположной стороны.
Рассмотрим два блочных элемента. Для начала просто подсветим их фоном различным цветом с помощью правила background:
Так они ведут себя в обычном случае:
А теперь для первого div-а давайте пропишем правило float со значением left, и зададим ему отступы с помощью свойства margin для наглядности его взаимодействия с соседним тегом:
Как видим, первый div стал выравниваться по левому краю, а содержимое соседнего элемента сало обтекать его по правой стороне.
При применении правила float к строчным элементам, последние начинают вести себя как блочные при взаимодействии с другими элементами web-страниц. Так, например, в обычных ситуациях правила height и width для строчных элементов работать не будут. Но после применения атрибута float, параметры размеров сразу начинают иметь значения.
Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:
Содержимое строчного элемента span
На рисунке видно, что правила width и height для span-а не сработали и его размеры стали равны в соответствии с его содержимым.
Теперь добавим элементу span правило float со значением left:
Содержимое строчного элемента span
Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам. Причем не зависимо от того к какому элементу применяется правило, он становится блочным.
А что если задать одинаковое значение атрибута стиля float для нескольких следующих друг за другом элементов? Давайте посмотрим:
Содержимое строчного элемента span
Они выстроятся по горизонтали друг за другом в том порядке, в котором они прописаны в html-коде, и будут выровнены по указанному краю родительского элемента.
Остается заметить, что правило float применяется при блочной верстке, основанной на плавающих контейнерах. При применении такого дизайна часто приходится помещать какие-либо элементы ниже тех, что были выровнены по левому или правому краю. Если просто убрать у них правило стиля float или задать для него значение none, результат будет непредсказуемым. В этом случае на помощь приходит правило clear.
Правило Clear
Атрибут стиля clear предоставляет возможность однозначно указать, что данный блочный элемент в любом случае должен располагаться ниже плавающих контейнеров. Другими словами если для элемента задано обтекание с помощью свойства float, то clear отменяет его действие для указанных сторон. Он может принимать следующие значения:
При clear равном left элемент располагается ниже всех элементов, для которых у свойства float задано значение left. Если clear равно right, то отменяется обтекание по правой стороне. И both отменяет обтекание по обеим сторонам элемента. Значение none отменяет действие правила clear и это значение по умолчанию.
Добавим в предыдущем примере, для первого блока div правило clear:left:
Содержимое строчного элемента span
С помощью этого правила мы заставили блок div проигнорировать плавающий элемент слева от него.
Блочная верстка — создание колоночного макета с помощью float
Как я уже говорил, свойство float очень подходит для создания колонок при блочной верстке. При создании макета, обычно необходимо выстраивать блоки рядом друг с другом, но по умолчанию в CSS блоки встают друг под другом. В этом случае на помощь приходят плавающие элементы и свойство float.
Допустим мы хотим сделать двухколоночный макет с шапкой и подвалом страницы. В левом блоке у нас будет меню, а справа основное содержимое сайта. Для начала пропишем в html-коде соответствующие блоки:
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Научным языком автомобиль это:
Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Классификация автомобилей
Автомобили бывают следующих типов:
Все права защищены. © 2010 год.
Сайт об автомобилях.
Как видно на рисунке, блоки выстроились по порядку сверху вниз. Блоки создали, теперь пропишем css стили для них (зададим для блока leftbar правило float, ограничим ширину leftbar-а и content-a и зададим фон для блоков):
.clr <
clear:both;
>
#leftbar <
float:left;
width:250px;
background:#E6EDF1;
>
#content <
width:750px;
background:#fff;
>
#footer <
background:#314451;
color:#fff;
text-align:center;
>
И смотрим, что получилось:
Видим, что благодаря правилу float:left блок leftbar стал плавать и содержимое блока content как бы обтекает его. Для того, чтобы этого не происходило зададим для блока content внешний отступ с помощью правила margin-left на 10 пикселей больше чем ширина блока leftbar:
#content <
width:750px;
background:#fff;
margin-left:260px;
>
В итоге получили двух-колоночный макет сайта.
Итак, подведем итоги. В данной статье мы рассмотрели два css свойства, которые лежат в основе блочной верстки:
Кроме этого рассмотрели построение двух-колоночного макета сайта. На этом прощаюсь с вами, до новых встреч Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей: