Очистка float


Содержание

Clearfix — очищение потока с сохранением структурной верстки

  • блок-родитель
  • плавающий блок, вложенный в блок-родитель
  • текст (или блок, или что угодно), который будет обтекать плавающий блок (нужен для демонстрации)
  1. какую высоту в данном случае будет иметь блок-родитель (div ), помещенный под блок-родитель?

Правильные ответы на рисунке:

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

Старое решение

Очищаем поток, используя дополнительный элемент, помещенный в конце блока родителя со свойством или атрибутом clear (

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

Новое решение

update 17.12.09 Егор Скорняков — чтобы скрыть точку лучше использовать visibility: hidden вместо overflow: hidden, т.к. в некоторых браузерах точка все же видна.

и для IE подключаем условными комментариями (рекомендуется) или с использованием хаков (не рекомендуется)

Очищаем поток overflow: hidden

update by Егор Скорняков

Так же для очистки потока есть более постой способ — добавить правило overflow: hidden родителю, который содержит плавающие элементы:

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

Микро clearfix

Если не нужна поддержка IE6-7:

Если нужна, тогда надежней использовать такой вариант:

Очистка float

Подробно описаны основные приемы отмены свойства float.

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

Вот, что в итоге получилось.

Изображение исходной верстки.

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

Использование пустого блока

Наверняка многие знают, что для отмены плавающей разметки в HTML используется дополнительный пустой div. Но где его ставить, в конце контейнера или после контейнера? Давайте рассмотрим оба варианта. В обоих случаях CSS будет одинаковым

Сначала поставим пустой очищающий div за контейнером.

Желаемого мы добились, но получилась дырка в фоне контейнера, впрочем, если этот фон совпадает с фоном его родителя (

Теперь поставим пустой очищающий div в конце контейнера.

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

Недостатки.
Прием с пустым дивом считается не совсем правильным, т.к. в структуре кода появляется пустой div элемент, а это семантически не верно.

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

Если контейнеру, содержащему добавить правило overflow: hidden, то мы получим результат, аналогичный предыдущему. Берем HTML код исходного примера, а в CSS исходного примера классу контейнера добавим такое правило.

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

Использование плавающего контейнера

Очистка происходит, если контейнер, содержащий плавающие элементы, также сделать плавающим. Такой контейнер не будет схлопываться, т.к. принимает высоту наиболее высокого элемента. Побочный эффект этого решения в том, что мы добавляем другой плавающий элемент на страницу, хотя в большинстве случаев хотим, чтобы он вел себя, как блочный элемент в нормальном потоке. Решение: установите для контейнера width:100%, это заставит браузер поставить разрыв строки перед содержимым контейнера.

Недостатки.
1. Установка ширины 100% может конфликтовать с требуемым заполнением.
2. IE может в некоторых случаях добавить нижний отступ margin-bottom.

Использование псевдоэлемента :after

Еще один способ вернуться к нормальному потоку размещения использует псевдоэлемент :after.
Опять используем верстку исходного примера, а в CSS классу контейнера добавляем следующее.

Для любителей поддерживать старые IE 6 и IE7 необходимо добавить такое дополнительное правило, чтобы установить hasLayout для них (по поводу hasLayout см. http://habrahabr.ru/post/50175/).
Дополнительное CSS правило для старых IE.

Недостатки.
1. IE6 и IE7 не поддерживают псевдокласс :after, поэтому надо использовать дополнительное CSS свойство.
2. Генерируется контент, не имеющий семантического смысла.

Опубликовано: 28.03.2015 в рубрике CSS, HTML

очистка float-эффекта без использования четкого div

Я знаю, что добавление четкого div после каждого поплавка делает код грязным.

левый и правый блоки имеют поплавки (выровнены влево и вправо). Мне нужно очистить эффект float после них, поэтому #content отображается правильно. Как я могу это сделать без использования четкого div?

html css css-float

3 ответа

4 SW4 [2013-11-14 18:20:00]

То, что вам нужно, — это clearfix (2)

Вы можете предоставить существующий

0 Ennui [2013-11-14 18:20:00]

Существует тонна хакеров и методов clearfix. Один из самых простых — просто добавить overflow: hidden в контейнере #header div.

Мой предпочтительный метод — Николас Галлахер «Micro Clearfix»:

Добавьте класс cf к элементу #header и все будет готово!

Вы также можете очистить float с помощью свойства clear: left|right|both которое означает, что элемент будет обернут после любых перемещаемых элементов с этой стороны (или с обеих сторон) — в вашем случае добавление clear: both для #content будут работать тоже, но Решение clearfix предпочтительнее, потому что просто добавление clear: both будут решать вашу проблему с позиционированием float для #content но не будут вынуждать #header содержать два плавающих элемента внутри него.

Заметки верстальщика

суббота, 24 марта 2012 г.

Поток документа, clearfix, overflow:h >

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

Итак, поток.
В браузерном мире и мире вёрстки есть понятие «потока документа». В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Соответственно, блок, расположенный в коде выше, будет показан раньше, чем блок, расположенный ниже. Вот этот порядок вывода блоков страницы и называется потоком.

Вырвать любой элемент из потока можно несколькими способами.
Это:
— задать блоку абсолютное позиционирование — position:absolute;
— задать блоку фиксированное положение на странице — position:fixed;
— и задать элементу обтекание — float:left, float:right.

Если с первыми двумя всё достаточно тривиально (нужно лишь указать координаты начальной позиции блока top|bottom и left|right, и не забыть, что при абсолютном позиционировании отсчёт ведётся от ближайшего родителя с position:relative (или от начала документа, если такового не имеется)), то со вторым способом могут оказаться проблемы.

Представим себе ситуацию.
У нас есть превьюшка какого-то поста с текстом и картинкой, в котором картинка выровнена по левому краю:

И вот всё вроде бы хорошо, всё вроде бы смотрится, всё замечательно. Да? Да!
Но ровно до тех пор, пока нам не понадобится декорировать этот блок, например задать фоновый цвет, или добавить рамку.

Давайте попробуем (заодно немного приукрасим наш блок):

Что у нас получилось:

Как видите немного не тот результат, какой мы ожидали.

Почему так произошло?
Всё дело в том, что, задав картинке выравнивание по левому краю (float:left), мы вырвали её из потока документа. Таким образом граница родителя .preview высчитывается, исходя из размеров последнего дочернего элемента в потоке, а именно по границе внутреннего текста.

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

Но это не наши методы :-)

И так, какие у нас есть варианты?

Существует 3 способа вернуть в поток элемент, вырванный из этого же потока:
1. дополнительный элемент со специальным CSS-свойством, очищающим поток документа: clear:both;
2. CSS-свойство overflow:hidden;
3. Так называемый clearfix.

Теперь давайте поподробнее.
1. Вставим внутрь .preview новый элемент и зададим ему стиль clear:both;

Как видите мы добились того, чего хотели. Забегая вперёд, скажу, что этот результат достигается всеми тремя способами.

Что же произошло? Читаем описание css-свойства clear:

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

У clear есть 3 основных значения: left, right, both. Таким образом, применяя clear мы очищаем поток с левой, с правой или обеих сторон.

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

2. overflow:hidden. С помощью этого стиля, задав его блоку родителю, создается новый контекст форматирования. Результат такой же, как и с прошлым способом.
Но у браузеров на движке Gecko (Firefox и ему подобные) есть неприятная особенность: текст в блоках, для которых задан overflow:hidden (либо auto) не выделяется дальше границ этого блока. Но эта особенность лично мне никак не мешала.

3. Clearfix. Это название css-класса, имя которго сложилось исторически :-)
Существует несколько вариантов такого класса, рабочих и не очень. Я лишь приведу тот, которым пользуюсь я сам:

Не буду подробно расписывать что здесь и зачем, это уже выходит за рамки данной статьи (это всегда можно нагуглить).
Добавив данный класс нашему блоку .preview мы так же добиваемся необходимого нам внешнего вида:

И так, подведём итог.
Все способы работают и все работают кроссбраузерно.
Но:
1й способ не семантичный, а семантику необходимо соблюдать. Зачем? Почитайте.
2й и 3й способ одинаково хороши для подавляющего большинства случаев.

Единственно, что хотелось бы сказать, что, применяя overflow:hidden, не забывайте, что всё, что выходит за границы блока — будет скрыто. Например, вам надо добавить какую-нибудь абсолютно спозиционированную рюшечку внутрь блока (например всплывающее сообщение), которая быдет выходить за его границы. Тогда используйте 3й способ. Просто добавьте класс clearfix к элементу и результат вас порадует.

Очистка float

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

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

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

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

Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента.

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

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

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

Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.

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

Для float, родственное свойство — clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.

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

Свойство clear может принимать четыре значения. Both, наиболее используемое, применяется для отмены float каждого из направлений. Left и Right — используются для отмены float одного из направлений. None — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но, безусловно, имеет свои цели.

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

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

Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:

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

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

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

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

    Метод пустого div-а. Используется, в буквальном смысле, пустой div.

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

Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с 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 и clear в CSS — инструменты блочной верстки

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжаем изучать классический CSS и на очереди у нас плавающие элементы, создаваемые с помощью Float. Так же мы затронем предназначение правила Clear (both, left, right) и посмотрим на примерах горизонтального меню и трехколоночного макета, как все это можно использовать на практике.

Чуть ранее мы с вами уже рассмотрели многие аспекты языка стилевой разметки, о которых вы можете узнать из составляемого по ходу повествования Справочника CSS. Таблицы каскадных стилей изучать значительно сложнее, чем чистый Html, и если вам что-то покажется сложным и на первых порах не понятным, то ничего странного и страшного тут нет. Попробуете на практике, набьете руку и все устаканится. Удачи!

Float — создание плавающих элементов в CSS коде

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

Но в CSS имеются два правила, которые могут это изменить. Речь идет о float и position. Когда к тэгам не применяются эти два правила, то такой вариант называется кодом в нормальном потоке.

С помощью float мы создаем так называемые плавающие элементы. Кстати, даже в чистом Html мы уже с вами сталкивались с подобным, когда для картинок прописывали атрибут Align со значениями Left или Right (читайте про обтекание картинок текстом и тег Img).

У этого правила имеется три возможных значения (по спецификации консорциума W3C), причем по умолчанию используется значение None, т.е. изначально у нас никаких плавающих элементов нет:

Значения Left и Right как раз и позволяют создавать плавание. При этом свойства такого тега поменяются и он иначе будет взаимодействовать с другими. Давайте рассмотрим все это на примере. Возьмем один строчный тэг Span и два блочных элемента Div.

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

Все правила я буду прописывать с помощью атрибута Style (в профессиональной верстке этот способ практически не используется), о котором вы сможете прочитать по приведенной ссылке. Также для наглядности я подсвечу тэги фоном с помощью правила background:

Теперь давайте пропишем для Span правило float со значение Left и посмотрим что из этого выйдет (для наглядности еще зададим нашему вновь испеченному плавающему блоку еще и отступ margin в 5px со всех сторон (margin:5px), чтобы было понятнее его взаимоотношение с соседними тэгами:

Наш элемент начинает плавать влево (ибо мы прописали float:left). При этом заработали ширина и высота, заданные в правилах height и width, не смотря на то, что Span изначально был строчным тегом. Кроме этого заработал и margin по высоте (отступ до соседей), который для строчных тэгов изначально был бесполезен.

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


Способы взаимодействия зависят от того, какое значение Display для него прописано, но в основном мы будет работать с блоками (поэтому и верстка называется блочной), для которых это CSS правило имеет значение block.

Чаще всего это будет контейнер Div — идеален для построения блочной схемы, т.к. изначально имеет нулевые margin и padding, а height и width у него имеют значение Auto. Т.о. Div является структурным блоком, так же как и Span, у которого тоже все нулевое.

Но давайте вернемся к нашим баранам, а именно опишем все те изменения, которые происходят с тегом, когда к нему применяется правило Float со значением Left или Right:

  1. В не зависимости от того, каким он был до этого, он становится блочным (соответствует display:block)
  2. Не смотря на то, что он становится блочным, его размер будет определяться объемом заключенного в него контента (проявляется некоторая специфика). Т.е. если я в нашем примере уберу значение ширины плавающего контейнера (width:250px), то ширина его будет уже определяться количеством заключенного в него текста:
  3. Плавающий элемент (с float left или right) в «Margin-colloapse» не участвует, т.е. не делится с соседними элементами своими отступами.
  4. Они не замечают соседние блочные элементы (с display: block), т.е. они с ними не взаимодействуют. Это можно видеть из приведенного чуть выше скриншота, где зеленый блок (div — зеленый прямоугольник) стоит так, как будто бы плавающего Span и не существует.
  5. А вот строчные тэги (с display: inline) обтекают плавающие блоки. На приведенном чуть выше скриншоте это видно по тому, что текст заключенный в Div обтекает Span.

Clear (both, left, right) и горизонтальное меню на Float

Возникает вопрос: а можно ли блоки, стоящие в коде ниже плавающего элемента (с float:left или right), заставить с ним взаимодействовать (т.е. выстраивать свое положение в зависимости от размеров плавающих блоков)? Оказывается можно, и для этого в CSS предусмотрено специальное правило Clear. Оно имеет четыре допустимых значения (none используется по умолчанию):

Когда мы для какого-либо Html тега прописываем CSS правило Clear, то это означает, что этот самый элемент должен будет учесть все плавающие и стоящие перед ним в коде блоки:

  1. Слева, если прописан clear:left
  2. Справа при right
  3. Везде при clear:both (означает с обеих сторон)

Давайте попробуем посмотреть на примере clear:left для приведенного чуть выше скриншота (его мы пропишем для зеленого Div контейнера):

Т.о. мы заставили контейнер Div увидеть и учесть плавающий слева от него элемент. Если для этого же тега прописать clear:right, то никаких изменений не произойдет, ибо плавающих вправо блоков (с right) у нас в коде перед этим тэгом не наблюдается.

Если же использовать clear:both, то будут учтены все плавающие блоки (и влево, и вправо — какие найдутся). Both используют в тех случаях, когда неизвестно с какой из сторон появится элемент плавающий и высокий. Именно его и можно чаще всего встретить в коде в наше время.

Ну, и давайте на небольшом примере посмотрим для чего же может быть использовано Float при верстке сайта. Дело в том, что с помощью плавающих блоков можно создать горизонтальное меню из обычного списка. Пусть у нас изначально имеется маркированный Html список UL такого вида:

Выглядеть это безобразие будет примерно так:

Теперь давайте уберем маркеры с помощью CSS правила list-style со значением None, а также сделаем строчные теги гиперссылок блочными с помощью display:block, подсветим их каким-либо фоном и зададим небольшие внешние отступы margin для элементов списка, чтобы их расклеить друг от друга.

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

В результате картинка нашего будущего шедевра будет выглядеть гораздо более похожим на меню, но, правда, на меню вертикальное, а нам ведь хочется создать горизонтальное с помощью Float:

Сделать из этого меню горизонтальное можно будет, всего лишь добавив элементу списка Li правило float:left:

Почему получилось именно так? Плавающий блок (с float отличным от none), когда ему надо выстроиться, смотрит на соседние тэги, на границы контейнера, и встает так высоко на вебстранице, как только сможет. Так и сделал «Пункт 1» — встал максимально высоко как только мог и потом уже поехал влево (ибо у него прописано float:left).

«Пункту 2» тоже хватило места встать максимально высоко, а затем он поехал влево и уткнулся в предыдущий плавающий блок. Тоже самое можно сказать и об остальных пунктах нашего горизонтального меню. Но что же произойдет, если в контейнере по ширине не будет хватать места для всех пунктов меню? Давайте посмотрим, искусственно сузив область просмотра:

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

Но если бы, например, высота первого пункта оказалась бы больше, чем у четвертого, по которому «Пункт 5» определил свою верхнюю границу, то получится такая вот картина:

Если слишком высоким окажется «Пункт 4», то картина изменится на такую:

В этом случае «Пункт 5» выровнялся по высоте последнего плавающего блока и не встретив никого препятствия на пути доехал до левой границы контейнера.

Отсюда, кстати, следует вывод, что если текст в пунктах такого горизонтального меню на основе css правила float будет очень длинным, то может получиться именно так, как было показано на предыдущих скриншотах. Возможно, что делать подобное меню будет проще с помощью фоновых картинок, размер которых фиксирован. Можно использовать и display:table, но создание таких меню это уже тема отдельной статьи и, возможно, даже не одной.

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

Но основное предназначение Float это, конечно же, создание колонок при использовании блочной верстки. Я уже об этом очень подробно писал в серии статей, посвященной созданию двух и трехколоночных макетов при Div верстке.

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

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

Затем для классов контейнеров левой и правой колонки задаем float:left и right (контейнеры для наглядности подсвечиваются фоном с помощью background), а также ограничиваем их ширину с помощью width:

Таким образом мы получили две боковые колонки фиксированной ширины с помощью волшебного правила Float. Остается только разобраться с областью контента:

Далее нужно центральную колонку отодвинуть слева на ширину левой, а справа — на ширину правой с помощью все того же правила margin (а именно для нашего примера margin:0 150px 0 100px;):

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

Float и clear — CSS свойства для плавающих элементов при блочной верстке

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

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

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

На протяжении сегодняшней публикации разберем действия правила float (left, right, none) и clear в том числе применительно к тегам DIV и SPAN, которые являются основой при блочной верстке. Конечно, на современном этапе подавляющее большинство использует при создании сайта прогрессивные CMS (в частности, WordPress). Однако, поверьте, что знания основ стилей и языка гипертекстовой разметки сослужат вам добрую службу в дальнейшем.

Как создаются плавающие элементы в CSS с помощью float

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

Одним из таких инструментов является, к примеру, CSS position (relative, absolute, fixed), о котором подробнее можете почитать по приведенной ссылке. Ну а другим средством, позволяющим изменить порядок стандартного отображения вебэлементов, как раз и служит правило float.

Данные по любому свойству (propety) CSS и его значениям можно почерпнуть со страницы спецификации W3C, где дана полновесная информация (данные по второй версии таблиц стилей, но это справедливо и для CSS3, которая уже действует официально, хотя до конца не доработана):

Как видите, float может принимать один из трех возможных параметров (left, right, none) и наследует значение родителя (inherit). Параметр float none применяется по умолчанию и означает, что элементы будут отображаться в порядке, соответствующем обычному потоку. А вот right или left позволяют создавать плавающие блоки со смещением вправо или влево соответственно.

Если помните, наиболее часто используемые HTML теги делятся на строчные и блочные, которые ведут себя по-разному (вообще, тип отображения всех элементов реализуется средствами CSS с помощью свойства Display). Блочные занимают всю доступную ширину, если не указано значение width. Высота определяется содержимым, ежели параметр height не прописан.

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

Для наглядности подключим правила CSS с помощью внутренних стилей атрибута STYLE (такой метод на практике обычно редко применяется, но он очень удобен при тестировании).

С тем, чтобы убедиться в правильности выше сказанного, возьмем два строчных тега, прописав для них свойства width и height, а также один блочный тег. С целью обеспечения наглядности зададим цветовые оттенки для каждого блока с помощью background (аналогично можно использовать background-color):

Результирующая картинка будет следующей:

Как видите, мы получили практическое подтверждение, что указанные высота (height:50px) и ширина (width:450px) не работают в обычных условиях для тега SPAN, который является строчным. Далее попробуем прописать свойство float right для первого строчного вебэлемента и float left для второго:

В итоге получаем:

Совершенно очевидно, что в этом случае первый и второй вэбэлементы становятся плавающими (один сместился до упора влево, другой вправо). Дополнительно они приобрели ширину и высоту, которая прописана в CSS стилях.

Более того, вебэлементы, определяемые строчным тегом SPAN, по другому стали взаимодействовать с соседним контейнером DIV. Если далее убрать, скажем, атрибут width из стилей обоих тегов SPAN, то их ширина будет определяться содержанием (в нашем случае длиной текста с названием элементов):

Теперь содержимое блока DIV начинает обтекать справа вэбэлемент с float: left. Есть смысл более наглядно ознакомиться с результатами конкретных практических изысканий на этой вебстранице, где вы можете сами попробовать менять область просмотра и понаблюдать, как поведут себя блоки по отношению друг к другу:

Подытоживая, определим некоторые особенности, которые будут присущи контейнеру с тем или иным значением свойства float (right или left):

  • Элемент смещается к левому или правому краю;
  • Он становится блочным вне зависимости от того, каким он был до этого;
  • Ведет себя таким образом, как будто соседних блочных вэбэлементов (с правилом display:block) не существует. В этом вы можете убедиться, если еще разок взгляните на скриншоты данного раздела статьи;
  • В то же время строчные теги (display:inline) будут обтекать плавающие блоки. Если вновь посмотрите на предыдущий скриншот, то заметите, что содержание DIV контейнера («Блочный элемент») обтекает SPAN с float:left справа.
  • Если явно не указывать ширину плавающего блока (в нашем примере width:450px), то она будет определена его содержимым;

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

Каким образом сделать горизонтального меню посредством CSS (float)

Далее разберем вполне конкретное задание по созданию горизонтального меню с помощью плавающих блоков, которое весьма часто используется при разработке вебсайтов. Сначала сконструируем маркированный список HTML посредством тега UL, код которого будет выглядеть так:

Получим примерно следующее:

Теперь немного подредактируем полученное меню с помощью CSS свойств: уберем маркеры напротив каждого из пункта при помощи list-style none, преобразуем строчные теги гиперссылок в блочные, применив к ним правило display block, а также для разнообразия придадим каждой из них приятный фон.

Также нелишним будет задать отступы margin, чтобы еще более улучшить дизайн, немного отодвинув пункты меню друг от друга. Для вебстраниц сайта WordPress можно задать тегу UL class «menu», для которого указать необходимые стили в файле STYLE.CSS:

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

Разница с предыдущим вариантом разительная, не правда ли? Теперь мы получили картинку, которая гораздо больше напоминает классическое меню. Правда, пункты в нем расположены не горизонтально, а вертикально. Для полного решения задачи нужно дописать для элемента HTML списка LI свойство float left, полностью правило CSS для него станет таким:

В итоге менюшка превратиться в горизонтальный вариант:

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

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

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

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

Тогда «Пункт 3» будет выравнивать свое положение по нижней границе последнего вэбэлемента в верхнем ряду и только потом переедет влево. Все описанные выше телодвижения должны помочь вам осмыслить суть воздействия float на расположение вебэлементов страницы.

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

Эффект применения свойства clear (both, left, right)

Теперь посмотрим, как использовать на свое благо особенности плавающих элементов, но одновременно заставить ниже следующие блоки на вебстранице учитывать их положение и размеры. Этого можно добиться с помощью правила clear. Опять же всю информацию можно получить от первоисточника (консорциума W3C):

Правило CSS clear имеет четыре возможных значения, причем property none является параметром по умолчанию, что вполне естественно, поскольку в этом случае обеспечивается стандартный поток кода. Также clear (none, left, right, both) наследуется от родительского тега (inherit).

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

  • none — отменяет действие самого свойства clear, в результате содержание тега (например, текст) обтекает вэбэлемент в соответствии с заданными ему стилями в виде float;
  • left и right — ликвидирует обтекание соответственно с левого либо правого края;
  • both — препятствует обтеканию одновременно справа и слева. Это самый распространенное значение clear в практическом использовании.

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

Итак, возьмем два контейнера DIV, которые схематически могут представлять из себя 2 колонки. Пропишем для них CSS свойства, включая фиксированную ширину (width), цвет фона и превратив их в плавающие с помощью float left. Добавим к ним текст, заключенный в тег P, который, как известно, является строчным:

Блоки DIV выстроятся в горизонтальный ряд, причем первый займет крайнее левое положение, насколько это возможно. А второй припаркуется к его правому краю (для него это будет расположение слева), дальше не позволит сдвинуться первый див. А вот текст продолжит этот ряд, так как общая ширина позволяет это сделать:

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

Опять же можете сами посмотреть вот здесь, как поведут себя все элементы, искусственно сужая-расширяя область просмотра. Чтобы устранить описанные недостатки, добавим контейнер со свойствами CSS и поместим внутрь его все имеющиеся слои. А также добавим дополнительно пустой DIV с правилом CSS clear both, чтобы запретить обтекание содержанием нижнего блока (текстом) колонок справа и слева:

Обратите внимание, что к стилям большого дива я добавил правило margin:0 auto, с помощью которого можно выровнять контейнер по центру. Результирующий вид будет таковым:

Теперь наша задача решена, поскольку итог соответствует поставленным условиям: две колонки расположены в горизонтальном ряду, а содержание ниже стоящего в коде вэбэлемента (ТЕКСТ) будет жестко оставаться на своем законном месте под колонками.

При уменьшении ширины просмотровой области конструкция будет оставаться в прежнем виде (при этом образуется горизонтальная прокрутка), в чем вы можете убедиться, перейдя на соответствующую вебстраницу с решением данного примера. В качестве дополнения посмотрите видео от Евгения Попова, где дается пример разметки вебстраницы с применением float и clear (очистка обтекания):

Clearfix на CSS

Многие верстальщики слышали о clearfix на CSS. Clearfix — метод отмены действия float без изменения структуры HTML-документа. Данный метод некоторыми верстальщиками весьма активно используется, поэтому я решил о нём Вам рассказать в данной статье.

Давайте разберём такой пример:

Всё бы ничего, но блок «Подвал сайта» оказался то же справа от картинки, а не под ней. Какое решение этой проблемы? Совершенно очевидно, что надо просто добавить ещё один блок, отменяющий действие float:

Теперь всё встаёт на свои места, однако, мы изменили структуру HTML-кода, добавив в него непонятный пустой блок. Так вот clearfix позволяет избежать этого. Никакого блока добавлять не нужно, а достаточно написать в CSS-коде так:

#article:after <
content: » «;
clear: both;
display: table;
>

Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.

Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.

От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Новый способ очистки float

    Сегодня мы рассмотрим совершенно новый способ очистки обтекания float. Это прогресс в области сайтостроения, позволяет существенно сократить html код, избавиться от одного элемента, что само по себе уже не может не радовать:) Это превосходно и замечательно!

    Рассмотрим на популярном примере. Нам требуется создать блок, где будут выводиться 5 последних новостей и ссылка на все новости. Внешний вид:

    Задача понятна. Формируем разметку:

    Без стилей это выглядит так:

    Теперь добавим стили:

    В итоге у нас получается что-то типа такого:

    Осталось только кнопку «Все новости» переместить к правому краю. Как это сделать? Конечно же float:right; Пробуем. Добавим стиль:

    И что у нас получилось?

    Но это же неправильно! Почему так получилось? Все правильно, это из-за свойства float:right, которое мы присвоили к нашей кнопке. Как заставить серый фон заканчиваться после нее? Раньше это решалось с помощью ввода дополнительного элемента

    Ура, работает! И это здорово. Работает в IE 7+ и во всех остальных браузерах. Это супер-кроссбраузерное решение проблемы с обтеканием.

    CSS свойства float и clear — как сделать обтекание блока и очистку обтекания

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

    Немного предыстории. Раньше, чтобы разместить один элемент слева или справа другого, в основном использовались таблицы. Но такой подход устарел, верстка стала делаться при помощи div блоков и поэтому для них придумали новое свойство – float.

    Какие значения имеет данное свойство? Их немного:

    • left — является ключевым словом, указывающим, что элемент должен плавать в левой части его содержащего блока;
    • right — является ключевым словом, указывающим, что элемент должен плавать с правой стороны его содержащего блока;
    • none — является ключевым словом, указывающим, что элемент не должен плавать;
    • inherit – наследуется родительское значение.

    Как было сказано выше, после применения свойства float может понадобиться отменить его действие – сделать очистку обтекания. Это можно сделать при помощи свойства clear, оно создано как раз для этого.

    Какие значения можно указать у clear? Посмотрим ниже:

    • left — указывает, что элемент будет перемещен вниз, чтобы очистить обтекание с левой стороны;
    • right — указывает, что элемент будет перемещен вниз, чтобы очистить обтекание с правой стороны;
    • both — указывает, что элемент перемещается вниз, будет очищено обтекание как с левой стороны, так и с правой;
    • none – не отменяет обтекания, может понадобиться в некоторых случаях;
    • inline-start — указывает, что элемент перемещается вниз для очистки обтекания в начале содержащего его блока, то есть будет очищено левое обтекание для текста с направлением текста слева-направо и правое обтекание для текстов с направлением текста справа-налево;
    • inline-end – аналогично предыдущему значению, только наоборот.

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

    Илон Маск рекомендует:  Downto - Ключевое слово Delphi
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL