Ваш заказ

Отмена обтекания блоков (float) наиболее часто встречающаяся операция при верстке HTML страниц. Мы рассмотрим все известные способы отменить действие CSS свойства float.

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

Типичный случай HTML верстки

Блоки .el-1 и .el-2 размещаются бок о бок внутри контейнера .container , и один элемент .main следует после .container :

Мы хотим, чтобы высота контейнера .container была равной высоте самого длинного из его дочерних элементов (т.е. либо .el-1 , либо .el-2 ) и чтобы блок .main , чтобы был после блока .container .

А вот, что мы видим: .container (черная рамка) схлопнулся, как будто в нем ничего нет, блок .main (блок с рыжим фоном) находится под блоком .container , как мы и хотели, но при этом он прячется за блоки .el-1 (с желтым фоном) и .el-2 (с розовым фоном). Черт знает что! Видел бы это мой начальник - непременно сказал бы мне,- "Используй, Шурик, табличную верстку" . К счастью, времена, когда web-страницы верстались таблицами уже давно прошли и мы отлично обойдемся и без них. Не верите? Читайте дальше.

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

Способ 1: метод старой школы

Как вам известно, CSS свойство clear устанавливает с какой стороны элемента запрещено его обтекание другими элементами, следовательно это свойство может предотвратить налезание элементов поверх плавающих. Идея заключается в следующем: вставьте пустой элемент, который свойство clear под обтекаемыми блоками. Это использовать определенный класс для подобного элемента - давно устоявшаяся традиция, так что вы можете использовать его в вашем HTML. Вот классический CSS код:

Clear { clear: both; }

Который применим к нашей HTML верстке:

Наш демо-пример, реализуемый с помощью этого метода:

Если вас не волнует схлопывающийся контейнер, а только неправильно расположенный блок .main , то вы можете также поместить "очищающий поток" элемент после контейнера. Но, если вы решите сделать так, то гораздо проще будет просто добавить свойство clear самому элементу .main .

Это простой и понятный метод. Тем не менее, в современной верстке практикуется отделение контента от стиля, поэтому лучше его не использовать.

Способ 2: свойство overflow

Используя свойство overflow в теге .container , мы можем заставить контейнер расшириться до высоты размещенных элементов. Наш CSS будет выглядеть следующим образом:

Container { overflow: hidden; /* или "auto" */ }

Наш HTML останется таким же, каким и был изначально, без дополнительных элементов. Вот, что мы получим в итоге:

К сожалению, у этого метода есть недостаток: любой дочерний элемент, который выступает за пределы контейнера, будет либо обрезан (в случае overflow: hidden;), либо вызовет появление полос прокрутки (в случае overflow: auto;).

Способ 3: класс “clearfix”

Мы создаем класс .clearfix с псевдо-элементами ::before и ::after и задаем им display: table , что создает анонимную ячейку таблицы. Этот класс будет использоваться для очищения плавающих элементов. CSS код выглядит так:

Clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ }

Изменим немного HTML код добавив к классу container класс clearfix :

Вот результат работы наешго новвого класса:

если вам не нужна поддержка браузеров ниже IE8, то наш код значительно сократится:

Clearfix:after { content: ""; display: table; clear: both; }

Способ 4: значение contain-floats для min-height

Container { min-height: contain-floats; }

Этот код дает практически тот же эффект, что и clearfix, или overflow, но с помощью одной строки кода и, к тому же он лишен тех недостатков, о которых мы говорили ранее. К сожалению, пока ни один из браузеров не поддерживает это свойство, так что просто имейте его ввиду.

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

Влад Мержевич

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

Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:

• обтекание картинок текстом;
• создание врезок;
• горизонтальные меню;
• колонки.

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

Рис. 3.32. Обтекание картинки текстом

Сам HTML-код остаётся практически неизменным и привёден в примере 3.21.

Пример 3.21. Использование float

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Итак, с терминологией разобрались. Давайте дополним пример 3.21, чтобы рисунок лучше гармонировал с текстом. Самое главное - задать отступ справа от изображения и на всякий случай снизу. Для этого к тегу добавляется класс с именем fig , у которого установлено свойство margin , оно одновременно определяет свой отступ на каждой стороне изображения (пример 3.22).

Пример 3.22. Обтекание картинки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед еще и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достает чашки и тарелки.

Результат примера показан на рис. 3.33.

Рис. 3.33. Рисунок с выравниванием по левому краю и обтеканием по правому

Создание врезок

Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает её с других сторон (рис. 3.34).

Рис. 3.34. Вид врезки

Чтобы врезка выделялась в тексте, у неё обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведённый выше способ обтекания текстом картинки, поэтому код для создания врезок практически идентичен предыдущему (пример 3.23).

Пример 3.23. Добавление врезки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Инструмент Magic Erase (Волшебный ластик) стирает пикселы близкие по цвету. Если мы работаем со слоем Background или со слоем, прозрачность на котором заблокирована, пикселы заменятся на фоновый цвет. Во всех остальных случаях мы получим прозрачную область.

Принцип работы с инструментом Magic Erase напоминает работу с инструментом Magic Wand. А именно, вначале устанавливаем подходящее значение Tolerance, включаем флажок Anti-aliased для создания плавных границ, убираем флажок с параметра Contiguous для одновременного удаления всего фона, после чего щелкаем по фотографии в районе неба. Если слой Background был предварительно переименован, мы получим прозрачные участки в нужных местах.

При создании врезок следует обязательно указывать её ширину с помощью свойства width . Иначе размер слоя окажется гораздо шире, чем это требуется.

Расположение слоев по горизонтали

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

Пример 3.24. Блоки по горизонтали

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 3.35.

Рис. 3.35. Расположение слоев при использовании свойства float

Из-за разного текста в подписи высота блоков также получается разной, из-за чего некоторые блоки «цепляются» за другие и не переходят на другую строку. Здесь может помочь установка высоты всех блоков через свойство height , например 100px или возврат к использованию display : inline-block .

Влияние обтекания

Свойство float кроме способности по созданию плавающих элементов имеет ряд особенностей, о которых необходимо знать. Главная особенность в том, что float действует на все близлежащие элементы, заставляя их участвовать в обтекании. Рассмотрим это на примере 3.25, где показано создание стрелок на одной строке с использованием значений left и right свойства float .

Пример 3.25. Влияние обтекания

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Хотя для текста и стрелок используются разные блочные элементы, которые должны располагаться на разных строках, влияние float заставляет подниматься текст выше, поскольку он попадает в зону обтекания (рис. 3.36). Также не отображается цвет фона у слоя arrow из-за того, что плавающие элементы не участвуют в потоке документа, по сути, это аналогично тому, что слой arrow оставить пустым.

Рис. 3.36. Влияние обтекания на нижележащий текст

Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся. Чтобы это обнаружить, достаточно обвести блок рамкой и поместить внутрь плавающий элемент с текстом (пример 3.26).

Пример 3.26. Высота блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Рисунок не оказывает воздействие на высоту слоя и выходит за его пределы (рис. 3.37).

Рис. 3.37. Высота слоя с плавающим элементом

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

Отмена обтекания

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

Ширина элемента

Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки. Для этого надо включить свойство width со значением 100%. Так, стиль в примере 3.25 можно дополнить следующим образом:

Left { float: left; width: 50%; } .right { float: right; width: 50%; text-align: right; }

Каждый слой со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после слоя arrow , начнётся с новой строки.

Этот метод применяется редко, поскольку ширину нельзя применить к изображениям, к тому же он не решает проблему с высотой слоя и его фоном.

Использование overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Значение auto в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto , scroll или hidden отменяет действие float . Стиль для примера 3.25 дополняется всего одной строкой:

Arrow { overflow: hidden; }

Результат после применения свойства overflow сразу меняется (рис. 3.38).

Рис. 3.38. Влияние свойства overflow на фон

Аналогично дополняется пример 3.26:

DIV { overflow: hidden; }

Результат показан на рис. 3.39.

Рис. 3.39. Влияние свойства overflow на границу

overflow одно из самых популярных свойств работающее в связке float . Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы элемента, при этом он будет «обрезан». В примере 3.27 картинка сдвигается влево от своего исходного положения.

Пример 3.27. Обрезание области элемента

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Винни-Пух в гостях у Кролика

Результат примера показан на рис. 3.40.

Рис. 3.40. Обрезание картинки

В IE6 метод работает только при установленном свойстве hasLayout . Чтобы его включить, можно добавить zoom : 1 наряду со свойством overflow .

Свойство clear

Для отмены действия float применяется свойство clear со следующими значениями.

• left - отменяет обтекание с левого края элемента (float : left ). При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
• right - отменяет обтекание с правой стороны элемента (float : right ).
• both - отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.

Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после плавающего. Обычно вводят универсальный класс, к примеру, clear и вставляют пустой тег

с этим классом (пример 3.28).

Пример 3.28. Использование clear

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

←

→

В данном примере для класса clear установлено свойство clear со значением both . Если вам требуется использовать разные значения, то можно ввести несколько классов и применять их по необходимости.

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

Пример 3.29. Использование float

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Меню

Лучшие фотографии

По комментариям

Софийский собор

Польский костёл

Новая строка

Подвал

Результат примера показан на рис. 3.41. Свойство clear действует не только на класс photo , но и на класс col1 , т.е. на все элементы выше, у которых установлено float . Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.

Рис. 3.41. Ошибка с отображением строки

В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearleft . Колонка приобретёт следующий вид.

Софийский собор

Польский костёл

Новая строка

Псевдоэлемент:after

Частое включение пустого тега

со свойством clear захламляет код, особенно при активном использовании свойства float . Логично перенести всё в стили, избавившись от лишних тегов. Для этого воспользуемся псевдоэлементом :after , который в комбинации со свойством content добавляет текст после элемента. К такому тексту можно применить стилевые свойства, в частности clear . Остаётся только спрятать выводимый текст от браузера.

Clearleft:after { content: "."; /* Выводим текст после элемента (точку) */ clear: left; /* Отменяем обтекание*/ visibility: hidden; /* Прячем текст */ display: block; /* Блочный элемент */ height: 0; /* Высота */ }

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

Поскольку текст, генерируемый через псевдоэлемент :after , располагается после элемента, он с лёгкостью заменяет конструкцию

. Там, где она требуется достаточно только добавить класс clearleft , как показано в примере 3.30.

Пример 3.30. Псевдоэлемент:after

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Винни-Пух в гостях у Кролика

Браузер IE не поддерживает :after до версии 7.0 включительно, поэтому приведённый пример в этих версиях работать не будет. Добавление zoom : 1 к плавающему элементу отменяет обтекание в IE.

Удобство приведённого метода заключается в использовании класса clearleft , который при необходимости добавляется к любому тегу. Также можно ввести дополнительные классы, стиль у которых будет различаться другими значениями clear .

Приветствую Вас, уважаемые читатели блога сайт. Сегодня мы продолжим изучать CSS и рассмотрим правила float и clear, имеющие важное значение при блочной верстке сайтов.

Создание плавающих контейнеров при помощи float

Изначально элементы веб-страницы располагаются на ней друг за другом, в том порядке, в котором определены в html-коде. Размещая в коде теги абзацев, заголовков, списков и др. на странице мы видим их в том же порядке. Но при помощи некоторых атрибутов css мы можем изменить этот порядок. Один из них float.

Правило float позволяет нам создавать так называемые . То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для .

У этого правила может быть три возможных значения:

float: left|right|none|inherit

По умолчанию float использует значение none , то есть элементы не имеют никакого обтекания и идут по порядку друг за другом.

Значения left и right выравнивают элемент веб-страницы соответственно по левому и правому краю родительского элемента, а остальное содержимое будет обтекать его с противоположной стороны.

Рассмотрим два блочных элемента. Для начала просто подсветим их :

Содержимое первого блочного элемента

Как видим, первый div стал выравниваться по левому краю, а содержимое соседнего элемента сало обтекать его по правой стороне.

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

Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:

Содержимое первого блочного элемента

На рисунке видно, что правила width и height для span-а не сработали и его размеры стали равны в соответствии с его содержимым.

Теперь добавим элементу span правило float со значением left:

Содержимое строчного элемента span

Содержимое первого блочного элемента

Содержимое второго блочного элемента

Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам . Причем не зависимо от того к какому элементу применяется правило, он становится блочным.

А что если задать одинаковое значение атрибута стиля float для нескольких следующих друг за другом элементов? Давайте посмотрим:

Содержимое строчного элемента span

Содержимое первого блочного элемента

Содержимое второго блочного элемента

Они выстроятся по горизонтали друг за другом в том порядке, в котором они прописаны в html-коде, и будут выровнены по указанному краю родительского элемента.

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

Правило Clear

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

clear: left|right|both|none|inherit

При clear равном left элемент располагается ниже всех элементов, для которых у свойства float задано значение left. Если clear равно right, то отменяется обтекание по правой стороне. И both отменяет обтекание по обеим сторонам элемента. Значение none отменяет действие правила clear и это значение по умолчанию.

Добавим в предыдущем примере, для первого блока div правило clear:left:

Содержимое строчного элемента span

Содержимое первого блочного элемента

Содержимое второго блочного элемента

С помощью этого правила мы заставили блок div проигнорировать плавающий элемент слева от него.

Блочная верстка — создание колоночного макета с помощью float

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

Допустим мы хотим сделать двухколоночный макет с шапкой и подвалом страницы. В левом блоке у нас будет меню, а справа основное содержимое сайта. Для начала пропишем в html-коде соответствующие блоки:

Сайт об автомобилях.

• Главная


• Устройство автомобиля


• О сайте


• Контакты

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

Научным языком автомобиль это:

Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

---

Классификация автомобилей

Автомобили бывают следующих типов:

• Легковой;


• Грузовой;


• Внедорожник;


• Багги;


• Пикап;


• Спортивный;


• Гоночный.

Все права защищены. 2010 год.
Сайт об автомобилях.

Итак, мы выделили в отдельные блоки шапку (id="header"), левую колонку (id="leftbar"), область контента (id="content") и подвал (id="footer"). Перед блоками, которые должны располагаться ниже своих предшествующих соседей я поместил пустые контейнеры с атрибутом class="clr". И вот так этот html-код будет отображаться в браузере:

Как видно на рисунке, блоки выстроились по порядку сверху вниз. Блоки создали, теперь пропишем css стили для них (зададим для блока leftbar правило float, ограничим ширину leftbar-а и content-a и зададим фон для блоков):

Clr{
clear:both;
}
#leftbar{

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 свойства, которые лежат в основе блочной верстки :

1. float — с помощью него создаются плавающие элементы и появляется возможность выстраивать блоки рядом друг с другом;
2. clear — отменяет действие float для соседних с плавающими блоками элементов.

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