Style clear both что это
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):
В данном примере мы рассмотрели основные черты плавающих блоков с разными параметрами свойства 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).
Суть этого правила, прописанного для определенного блока, заключается в отмене действия в зависимости от его значения:
Ничего не понятно? Смутно и лишь на интуиции улавливаете смысл? Ничего, после того, как разберем наглядно пример, думаю, все встанет на свои места. Для этого поставим задачу: расположить два блока горизонтально рядом друг с другом, а внизу расположить некий текст. Такая конструкция довольно часто встречается при верстке.
Итак, возьмем два контейнера DIV, которые схематически могут представлять из себя 2 колонки. Пропишем для них CSS свойства, включая фиксированную ширину (width), цвет фона и превратив их в плавающие с помощью float left. Добавим к ним текст, заключенный в тег P, который, как известно, является строчным:
Блоки DIV выстроятся в горизонтальный ряд, причем первый займет крайнее левое положение, насколько это возможно. А второй припаркуется к его правому краю (для него это будет расположение слева), дальше не позволит сдвинуться первый див. А вот текст продолжит этот ряд, так как общая ширина позволяет это сделать:
Как вы понимаете, при таком раскладе нашу задачу нельзя считать выполненной. Во-первых, при сужении области просмотра на величину, меньшую суммарной ширины дивов, правая колонка спрыгивает вниз и располагается под левой. Во-вторых, содержание третьего вебэлемента с текстом расположено рядом, а не снизу колонок:
Опять же можете сами посмотреть вот здесь, как поведут себя все элементы, искусственно сужая-расширяя область просмотра. Чтобы устранить описанные недостатки, добавим контейнер со свойствами CSS и поместим внутрь его все имеющиеся слои. А также добавим дополнительно пустой DIV с правилом CSS clear both, чтобы запретить обтекание содержанием нижнего блока (текстом) колонок справа и слева:
Обратите внимание, что к стилям большого дива я добавил правило margin:0 auto, с помощью которого можно выровнять контейнер по центру. Результирующий вид будет таковым:
Теперь наша задача решена, поскольку итог соответствует поставленным условиям: две колонки расположены в горизонтальном ряду, а содержание ниже стоящего в коде вэбэлемента (ТЕКСТ) будет жестко оставаться на своем законном месте под колонками.
При уменьшении ширины просмотровой области конструкция будет оставаться в прежнем виде (при этом образуется горизонтальная прокрутка), в чем вы можете убедиться, перейдя на соответствующую вебстраницу с решением данного примера. В качестве дополнения посмотрите видео от Евгения Попова, где дается пример разметки вебстраницы с применением float и clear (очистка обтекания):
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:
Clear (both, left, right) и горизонтальное меню на Float
Возникает вопрос: а можно ли блоки, стоящие в коде ниже плавающего элемента (с float:left или right), заставить с ним взаимодействовать (т.е. выстраивать свое положение в зависимости от размеров плавающих блоков)? Оказывается можно, и для этого в CSS предусмотрено специальное правило Clear. Оно имеет четыре допустимых значения (none используется по умолчанию):
Когда мы для какого-либо Html тега прописываем CSS правило Clear, то это означает, что этот самый элемент должен будет учесть все плавающие и стоящие перед ним в коде блоки:
Давайте попробуем посмотреть на примере 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.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (12)
Спаасибо, многому научился благодаря вашему блогу. Подскажите пожалуйста. Такая ситуация: главная страница, анонс новости, а под ним аватар (типа «booble») коммента и кол-во комментов в цифрах. Мне нужно, чтобы эта связка booble+цифра отображалась в той же строке где и окончание новости. А она всё равно отображается под анонсом новости. Вот код:
— анонс новости, а интересующие комменты
Александр: ну, точно сказать не могу, но я бы попробовал CSS свойство display: inline
Спасибо, у Вас хороший блог!
«В этом случае «Пункт 5» выровнялся по высоте последнего плавающего блока и не встретив никого на пути доехал до левой границы контейнера.»
Скажите а как можно реализовать также, как на третьем с конца изображении, но, чтобы блоки упирались плотно в верхние?
Смысл в том, что мне необходимо получить ленту постов, по ширине должно помещаться столько, сколько поместиться а остальные уходят под верхний ряд (и так далее), но без выравнивания в одну линию а плотно друг к другу? Можно ли обойтись без скриптов а чисто версткой?
3.Плавающий элемент (с float left или right) в «Margin-colloapse» не участвует, т.е. не делится с соседними элементами своими отступами.
самый лучший урок в интернете! Спасибо автору статьи!
Спасибо, хороший урок, но я бы порекомендовал комплексное обучение по урокам Дмитрия Охрименко ( CSS+HTML ) — http://itvdn.com/ru/video/html5-and-css3
Подскажите пожалуйста, почему при элементы с float:(left,right) не имеют высоты, если их «засунуть» в блочный элемент.