Как отменить обтекание в css. Обтекание элементов

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin .

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;} .

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;} , или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

Разметка HTML

List of towns in England

Amersham

Amersham is ....jpg">Buxton is ...

Chesterfield

Chesterfield is ....jpg">

It has ....jpg">Dartmouth is ...

CSS стили

Body { margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*создаем счетчик для любого заголовка h2*/ } h1 { font-family: "Lora", serif; color: #564C4A; font-weight: 300; } h2 { font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: both; /* отменяем обтекание с обеих сторон */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */ } h2:before { content: " " counter(h2) ". "; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */ } p { font-family: arial; color: #785F5B; line-height: 1.3; } /********** картинка слева **********/ .left { float: left; margin: 0 1em 1em 0; } /********** картинка справа **********/ .right { float: right; margin: 0 0 1em 1em; } /********** картинка между текста **********/ .columns { float: left; max-width: 30%; margin: 0; } .img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; } /********** картинка по центру********* */ .center { display: block; margin: 0 auto 1.5%; }

Обтекание картинки с двух сторон

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

Разметка HTML

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Отмена обтекания блоков (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 стало стандартом, и я очень рекомендую использовать его вместо прежних двух методов.

Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.

Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:

• выравнивание изображения по центру
• обтекание изображения текстом
• размещение изображения в поле

Выравнивание изображения по центру

Для выравнивания изображения по центру колонки текста, проще всего тег поместить в контейнер

Для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега

Как это реализовано, смотрите в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере к контейнеру

Добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание изображения текстом

Обтекание изображения текстом - один из самых распространненых способов верстки HTML-страниц, который позволяет эффективно использовать все свободное пространство. популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для того чтобы настроить обтекание изображения текстом можно использовать несколько способов, основанных как и на HTML так и на CSS.

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

Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align=»right», для выравнивания по левому краю и обтекания текстом справа используем align=»left». Здесь также полезно использовать атрибуты тега - vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).

Пример 2. Обтекание изображения текстом с использованием HTML

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.

Для того чтобы настроить обтекание изображения с помощью CSS стилей будем использовать правило float. float:right — выравнивает изображение по правому краю документа и делает обтекание текстом слева, а float:left делает выравнивает изображение по левому краю документа и обтекание текстом справа от изображения (пример 3).

Пример 3. Обтекание изображения текстом с использованием CSS

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.

Здесь к тегу добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.

Изображение на поле

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

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

Рис. 3. Размещение изображения в поле слева от текста

Я знаю два способа создать подобную структуру — с помощью HTML-тегов

Таблицы: данный способ удобен тем, что легко и понятно позволяют организовать колоночную структуру с помощью ячеек. Данный способ является олдскульным и его применение не особо приветствуется в современном веб-дизайне. Считается что данный способ избыточен и сложен в правке. Но все новички через него проходят. Для такой структуры нам потребуется таблица с тремя колонками, в первой колонке будет само изображение, в третьей текст, а между ними мы укажем отступ — во второй колонке. Можно обойтись и двумя колонками, а отступ указать через CSS-стили или с помощью атрибута width тега (пример 4).

Пример 4. Размещение изображения на поле с помощью таблиц

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

то, что получится в результате показано на рисунке 4.

Рис. 4. Изображение на поле слева от текста

В примере 4 ширина изображения составляет 90 пикселей, а ширина колонки, где он располагается - 110 пикселей. Разница между ними обеспечивает нам нужный отступ от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте — vertical-align: top.

CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя

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

Пример 5. Размещение изображения на поле с слоев и CSS-стилей

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<code > <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок на поле</ title > <style type = "text/css" > </ style > </ head > <body > <div id = "pic" > <img src = "images/igels.png" width = "90" height = "78" alt = "Вы не поверите, но это ёжик" > </ div > <div id = "text" > Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. </ div > </ body > </ html >

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

Свойство float:left для слоя #pic нужно, чтобы задать примыкание изображения к левому краю документа, а верхняя строка текста совпадала с верхней строкой изображения. Без этого свойства слой #text опускается вниз на высоту изображения. Также для слоя #text указываем отступ слева margin-left:110px на расстояние 110 пикселей, чтобы там текст не налазил на изображение. Если изображение нужно разместить в правом поле, то указываем float:right для #pic и margin-right:110px для #text.

P.S.: Согласно спецификации HTML4 изображения должны помещаться внутри блочных элементов таких как div или p.

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

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

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

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

Обтекание происходит с помощью стилевого свойства 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.

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

Инструмент 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

Компьютеры и орг.техника 4296

Мобильные устройства 2109

Фото 315

Видео 1856

Результат примера показан на рис. 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 .

Последнее обновление: 21.04.2016

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

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

right: элемент перемещается вправо

none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

Л. Толстой. Война и мир. Том второй. Часть третья

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

«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...

В данном случае мы получим последовательное размещение элементов на странице:

Теперь на той же странице применим свойство float , изменив стили следующим образом:

Image { float:left; /* обтекание слева */ margin:10px; margin-top:0px; } .sidebar{ border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin-left:10px; font-size: 20px; float: right; /* обтекание справа */ }

Соответственно изменится и размещение элементов на странице:

Элементы, к которым применяется свойство float , еще называют floating elements или плавающими элементами.

Запрет обтекания. Свойство clear

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

Для запрета обтекания элементов в CSS применяется свойство clear , которое указывает браузеру, что к стилизуемому элементу не должно применяться обтекание.

Свойство clear может принимать следующие значения:

left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, пусть на веб-странице будет определен футер:

Copyright MyCorp. 2016

Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:

Изменим стиль футера:

Footer{ border-top: 1px solid #ccc; clear: both; }

Теперь футер не будет обтекать изображение, а будет уходить вниз.