После того как меня шестьдесят восьмой раз спросили почему блок с float отображается неправильно, я решил написать эту заметку, которая объяснила бы типичные ситуации, с которыми сталкивается начинающий верстальщик, а так же для того, чтобы в следующий раз просто дать ссылку на эту статью.
Disclaimer
Я не профессиональный верстальщик, хотя по роду моей деятельности мне пришлось сверстать не один десяток сайтов. У меня есть друзья, которые учатся верстать и я им хочу помочь. Скорее всего они есть и у вас. Цель этой статьи не рассказать что-то новое, а рассказать о старом с точки зрения наиболее часто возникающих у начинающих верстальщиков проблем. Я не претендую на абсолютную истину своих слов, и я буду только рад, если вы меня поправите и дополните.Свойства элемента с float, которые нужно всегда держать в голове
если оно установлено в значение left или right- Элемент отображается как блочный , так словно ему установлено свойство display: block;
- Элемент по ширине сжимается до размеров содержимого, если для элемента явно не установлена ширина width;
- Элемент прилипает к левому (left) или правому краю (right);
- Все остальное содержимое страницы, идущее в HTML коде после элемента с float, обтекает его;
Жизненный случай #1
У меня есть два блока, я применил к одному из блоков float: right, он выровнялся по правому краю, но все равно остался под первым. Пример как это выглядит.
Причина
Если так произошло, значит, вы применили float не к первому, а ко второму блоку. В силу того, что плавающий (тот, который с float) элемент обтекают только те элементы, которые идут в HTML коде после него, первый блок его обтекать не будет.Так же блочные элементы по умолчанию имеют максимально возможную ширину (пруф) в пределах родителя. Ваш плавающий элемент просто не помещается на одной линии с первым блочными элементами с максимальной шириной, поэтому он вытесняется вниз.
Так же всё содержимое сайта, которое идет в HTML коде после плавающих элементов, обтекает их, что часто приводит к неожиданному эффекту.
Решение
Решение #1. Явно задать высоту контейнера . В тех случаях, когда известно какими должны быть размеры контейнера, это самое простое решение.Решение #2. Добавить пустой блок с clear: both . Добавление подобного элемента отчищает «плавучесть» блоков и заставляет контейнер растягиваться на всю высоту. Семантически это не самое лучшее решение, так как вводит лишний элемент разметки.
Решение #3. Применить свойство overflow: auto (или hidden) к контейнеру . Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы включать плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки или скрыть их. Впрочем, иногда это случается, поэтому будьте осторожны.
UPD
Так же читайте от как продолжение обсуждения свойства float.
Здравствуйте, уважаемые читатели блога сайт! После весьма существенного перерыва я решил продолжить тему изучения CSS и сегодняшняя статья будет посвящена созданию плавающих элементов посредством float, на практических примерах рассмотрим действие данного правила вкупе со свойством clear для создания колонок и горизонтального меню.
Для непосвященных, думаю, правильнее будет для начала ознакомиться с другими материалами по каскадным таблицам стилей. Напомню, что все статьи на данную тему находятся в разделе , в котором вы сможете почерпнуть необходимую информацию.
Плавающие элементы встречаются также в HTML при необходимости создать обтекание тех же изображений текстом (атрибут align тега img с параметрами left и right). Так что этот аспект весьма популярен при разработке содержания вебстраниц.
На протяжении сегодняшней публикации разберем действия правила float (left, right, none) и clear в том числе применительно к , которые являются основой при блочной верстке. Конечно, на современном этапе подавляющее большинство использует при создании сайта прогрессивные CMS (в частности, WordPress). Однако, поверьте, что знания основ стилей и языка гипертекстовой разметки сослужат вам добрую службу в дальнейшем.
Как создаются плавающие элементы в CSS с помощью float
Для начала напомню, что в нормальном потоке вебэлементы выстраиваются на вебстранице в строгом соответствии с очередностью, которая задается в коде. Однако, как известно, всегда бывают исключения. Это логично, поскольку необходимы рычаги для решения нестандартных задач.
Одним из таких инструментов является, к примеру, о котором подробнее можете почитать по приведенной ссылке. Ну а другим средством, позволяющим изменить порядок стандартного отображения вебэлементов, как раз и служит правило float.
Данные по любому свойству (propety) CSS и его значениям можно почерпнуть со страницы спецификации W3C , где дана полновесная информация (данные по второй версии таблиц стилей, но это справедливо и для CSS3, которая уже действует официально, хотя до конца не доработана):
Как видите, float может принимать один из трех возможных параметров (left, right, none) и (inherit). Параметр float none применяется по умолчанию и означает, что элементы будут отображаться в порядке, соответствующем обычному потоку. А вот right или left позволяют создавать плавающие блоки со смещением вправо или влево соответственно.
Если помните, наиболее часто используемые , которые ведут себя по-разному (вообще, тип отображения всех элементов реализуется средствами CSS с помощью свойства Display). Блочные занимают всю доступную ширину, если не указано значение width. Высота определяется содержимым, ежели параметр height не прописан.
Строчные теги располагаются на одной строке и переносятся на другую только в том случае, если заканчивается доступное по ширине место. В обычном случае для них невозможно указать высоту и ширину. Основываясь на этой информации рассмотрим конкретный пример.
Для наглядности подключим правила CSS (такой метод на практике обычно редко применяется, но он очень удобен при тестировании).
С тем, чтобы убедиться в правильности выше сказанного, возьмем два строчных тега, прописав для них свойства width и height, а также один блочный тег. С целью обеспечения наглядности зададим цветовые оттенки для каждого блока с помощью background (аналогично можно ):
Строчный элемент 1 Строчный элемент 2
Результирующая картинка будет следующей:
Как видите, мы получили практическое подтверждение, что указанные высота (height:50px) и ширина (width:450px) не работают в обычных условиях для тега SPAN, который является строчным. Далее попробуем прописать свойство float right для первого строчного вебэлемента и float left для второго:
Строчный элемент 1 Строчный элемент 2
В итоге получаем:
Совершенно очевидно, что в этом случае первый и второй вэбэлементы становятся плавающими (один сместился до упора влево, другой вправо). Дополнительно они приобрели ширину и высоту, которая прописана в 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)
Далее разберем вполне конкретное задание по созданию горизонтального меню с помощью плавающих блоков, которое весьма часто используется при разработке вебсайтов. Сначала сконструируем , код которого будет выглядеть так:
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
- Пункт 5
- none - отменяет действие самого свойства clear, в результате содержание тега (например, текст) обтекает вэбэлемент в соответствии с заданными ему стилями в виде float;
- left и right - ликвидирует обтекание соответственно с левого либо правого края;
- both - препятствует обтеканию одновременно справа и слева. Это самый распространенное значение clear в практическом использовании.
- Есть контейнер с двумя блоками или больше.
- У внутренних блоков задано свойство CSS float left или right.
- Если размера блоков не хватает, то контент снизу начинает лезть в блок и вся верстка разъезжается.
- , удерживающие кнопки навигации, используют float: left:
Чтобы продемонстрировать важность свойства float в этом примере, вот, скриншот того же самого изображения после использования firebug для удаления the float: left:
Grid-Based фото галереи
Простое использование свойства float это float:left серии фотографий, содержащихся в неупорядоченном списке, которое получает тот же самый результат как, что Вы могли бы увидеть в табличной разметке.
Страница продуктов Foremost Canada’s (см. изображение выше) отображает свои продукты в формате сетки, рядом с боковой колонкой. Фотографии отображаются в виде неупорядоченного списка со свойством float, для всех
- элементов установлено float: left. Это работает лучше, чем на табличная сетка, поскольку число фотографий в галерее может измениться, и разметка не будет затронута.
На Paragon Furniture’s futons page (см. изображение выше) другой пример страницы продуктов, где используется неупорядоченный список с floated тегами
- .
На iStockphoto’s search results page (см. изображение выше) таже сетка, структурированных фотографий, здесь фотографии содержат float:left
теги, а не- теги.
Выравнивание поля с кнопкой
Моделирование по умолчанию элементов формы для различных браузеров может быть проблематичным. Часто в одном поле формы, таком как форма поиска, необходимо поставить элемент рядом с кнопкой “отправления”.
Правильное использование CSS свойства float может стать непростой задачей даже для опытного верстальщика. В этой статье собраны варианты применения float, а также некоторые ошибки, с наглядными примерами.
Что такое float?
Некоторые элементы в CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. отображаются на странице в одну строку.Один из способов переназначить элементам тип обтекания - это использование свойства float. Классический пример - использование float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:
Lorem ipsum...
Они отображаются с новой строки:
Добавляем немного CSS картинке:
img { float: right; margin: 20px; }Получается выравнивание по правому краю:
Если текста больше, то абзац будет обтекать картинку:
Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом. Вот такая конструкция работать не будет: p {margin: 20px;}
Правильно вот так:
img {margin: 20px;}
Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:
P { border: solid 1px black; }
Результат может вас удивить:
Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае. Чтобы исправить это, можно применить float:left к абзацу и указываем абсолютную ширину:
Странные правила float
Перейдем к более сложным вариантам использования float: к правилам, регулирующим плавающие объекты. Это бывает необходимо при верстке галереи изображений. Например:
По умолчанию каждый элемент списка появится с новой строки. Если применить к каждому float:left, изображения встанут в один ряд с переносом строки:
Li { float: left; margin: 4px; }
Но что, если изображения разной высоты?
Если мы добавим элементам списка отображение в одну строку, получится немного симпатичнее:
Li { display: inline; }
А теперь выравниваем по вертикали:
Img { vertical-align: top; }
Следует помнить, что в случае большей высоты картинок, остальные изображения обтекают только одно предыдущее, например:
Пример изменения очередности элементов - например, у нас есть список элементов по порядку:
Если мы хотим расположить их в обратном порядке, просто применяем float:right вместо float:left, и не придется менять порядок в HTML:
С помощью float удобно группировать элементы на странице, но большой проблемой становится то, что последующие элементы (текст или блок) также получают свойство обтекания. Например, у нас есть блок картинок:
Текст под ним начинает обтекать весь блок:
Чтобы избежать этого, необходимо использовать свойство clear. Если применим его ко второму изображению:
Ul li:nth-child(2) { clear: left; }
Получим вот, что:
В этом случае остальные изображения продолжают наследовать float:left. Соответсвенно текст будет отображаться коряво:
Нужно применить clear:both к абзацу:
P { clear: both; }
Наша проблема решена:
Теперь предположим, что нам необходимо установить фон для галереи из предыдущих примеров. Если бы элементы были не плавающими, то получилось бы вот, что:
Ul { background: gray; }
Но если элементам списка применить float:left, фон совсем пропадает:
Если мы сначала устанавливаем высоту для UL:
Ul { height: 300px; }
Это тоже не решает проблему, т.к. размеры фона заданы абсолютно. Нам поможет класс clearfix, который будет применен к div на том же уровне, что и элементы UL.
Clearfix { clear: both; }
Существует еще одно решение, с использованием overflow:
Ul { overflow: auto; }
Девять правил float-элементов:
- Плавающие элементы не могут выходить за край своего контейнера-родителя.
- Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при float:left, либо слева и ниже, при float:right.
- Блок с float:left не может быть правее, чем блок с float:right.
- Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
- Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
- Плавающий элемент не может располагаться выше, чем предыдущая строка inline-элементов
- Плавающий блок должен быть расположен как можно выше.
- Один плавающий элемент, следующий за другим, не может выходить за пределы своего контейнера - происходит перенос на следующую строку.
- Блок с float:left должен быть расположен как можно левее, а с float:right - как можно правее.
- теги.
Получим примерно следующее:
Теперь немного подредактируем полученное меню с помощью CSS свойств: уберем маркеры напротив каждого из пункта при помощи list-style none, преобразуем строчные в блочные, применив к ним правило display block, а также для разнообразия придадим каждой из них приятный фон.
Также нелишним будет задать отступы margin, чтобы еще более улучшить дизайн, немного отодвинув пункты меню друг от друга. Для вебстраниц сайта WordPress можно задать тегу UL "menu", для которого указать необходимые стили в файле STYLE.CSS:
Menu {list-style:none;margin:0;padding:15px;} .menu li a{display:block;padding:10px;background:#EFCDB8;} .menu li{margin:10px;}
В данном случае я намеренно не использую атрибут STYLE, поскольку в этом случае придется несколько раз указывать одни и те же CSS свойства для каждого тега LI. В результате наших действий меню приобретет такой вид:
Разница с предыдущим вариантом разительная, не правда ли? Теперь мы получили картинку, которая гораздо больше напоминает классическое меню. Правда, пункты в нем расположены не горизонтально, а вертикально. Для полного решения задачи нужно дописать для элемента HTML списка LI свойство float left, полностью правило CSS для него станет таким:
Menu li{margin:10px;float:left;}
В итоге менюшка превратиться в горизонтальный вариант:
Думаю, на основании выше предоставленной информации вам понятна причина, по которой произошла такая метаморфоза. Каждый вебэлемент меню с 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 (очистка обтекания):
Вопросы о принципах работы свойств CSS float left и float right возникают с завидной регулярностью. Особенно больной темой это становится для верстальщиков и программистов, которые годами собирали макеты на таблицах, а тут их начинают заставлять работать с блоками. Дополнительно это усугубляется вопросами коссбраузерной верстки, хотя последнее время эта тема уже как-то стала не так сильно трепать нервы специалистам.
В любом случае, я решил вместо постоянных ответов на одни и те же вопросы, как работает свойство CSS float left и float right, написать пост и отправлять всех страждущих к нему.
Уверяю, что в данном посте не будет ничего особенно нового. Подобной инфы полно в сети. Но каждый раз показывать пример на пальцах или искать ссылку, куда отправить очередного моего сотрудника, уже устал. Поэтому тут будет представлен коротенький сборник того, с чем чаще всего приходится сталкиваться.
Блоки в контейнере с установленными свойствами CSS float left и float right
Типичная проблема:
На иллюстрациях ниже показана пара подобных случаев.
Ситуация с двумя или более блоками со свойством CSS float left
Как должно быть:
Ситуация, когда у одного блока свойство CSS float left, а у другого right
Как должно быть:
Как выглядит при ошибочной верстке:
Почему такая ситуация получилась
Наши блоки со свойствами CSS float left и float right находятся внутри контейнера, для которого задан некоторый отступ снизу. Несмотря на, казалось бы, верно заданные параметры, отступ снизу мало того, что не действует, так еще и содержимое нижних блоков залезает в наш верхний блок.
Все дело в том, что блоки с заданными свойствами float не влияют на изменение высоты своего контейнера.
Например: в первом случае у нас все блоки внутри контейнера плавающие. Поэтому высота контейнера будет равна нулю.
Во втором случае у нас в контейнере помимо плавающих блоков есть еще и текст. Поэтому высота контейнера будет соответствовать высоте заполняющего этот блок текста. Соответственно, если текста будет больше высоты внутренних плавающих блоков, проблемы вы не заметите. Если текста недостаточно, как в приведенном примере, то содержимое нижних блоков полезет до нижней границы контейнера.
Решение 1 добавить пустой блок с CSS свойством clear: both
Перед закрывающим тегом контейнера необходимо поместить блок со свойством CSS clear:both. Тогда контейнер будет достроен до нижнего блока, поскольку это свойство блокирует влияние блоков со свойством CSS float left и float right.
Пример кода страницы:
Также блок со свойством clear:both можно поместить сразу после закрывающего тэга контейнера или после последнего плавающего блока. Контейнер в этой ситуации своего размера не поменяет. Да и по большому счету он будет не нужен, но блок со свойством clear:both просто отсекает содержимое от плавающих блоков.
Пример кода страницы:
Однако не все знают, что поле направлений соответствует определитель системы линейных уравнений, что неудивительно. К тому же определитель системы линейных уравнений категорически восстанавливает вектор, как и предполагалось. Окрестность точки по-прежнему востребована. Лемма, как следует из вышесказанного, существенно стабилизирует абстрактный расходящийся ряд, что несомненно приведет нас к истине. Лемма осмысленно раскручивает неопровержимый натуральный логарифм, дальнейшие выкладки оставим студентам в качестве несложной домашней работы.
Пример кода CSS:
Container { display: block; } .in_block { display: block; float: left; width: 100px; height: 100px; margin-right: 10px; } .clear { display: block !important; margin: 0px !important; padding: 0px !important; clear: both !important; float: none !important; height: 1px !important; width: auto !important; }
Методически – не самое элегантное решение, хотя заслуживает право на жизнь, поскольку вполне эффективно. Явным недостатком можно назвать тот факт, что нам приходится добавить лишний код в текст страницы.
Решение 2 явно указать высоту контейнера
Вариант с заданием высоты контейнера хорош только в том случае, если вы точно знаете предполагаемый размер содержимого этого контейнера. Тогда наш CSS будет иметь примерно такой вид:
Container { display: block; height: 100px; } .in_block { display: block; float: left; width: 100px; height: 100px; margin-right: 10px; }
В случае, когда содержимое динамическое или верстка «резиновая» и ширина контейнера может меняться, то это будет уже не столь хорошим решением.
Решение 3 задать свойство CSS overflow для контейнера
Если вы зададите значение свойства контейнера overflow равным auto или hidden , браузер будет перестраивать контейнер, таким образом, чтоб уместить все плавающие блоки и не отображать полосы прокрутки.
Если для свойства overflow вы задали значение auto, то будьте готовы к тому, что в некоторых ситуациях полосы прокрутки все же могут появиться. Поэтому следует всесторонне проверять верстку в разных режимах.
Пример кода CSS:
Container { display: block; overflow: auto; } .in_block { display: block; float: left; width: 100px; height: 100px; margin-right: 10px; }
Два блока на одном уровне с указанными свойствами CSS float left и float right
Типичная ситуация: текст, который обтекает два блока с неким содержимым. При этом блоки расположены по сторонам от текста.
Как должно быть:
Пару лет назад, когда разработчики впервые начали переходить к HTML-разметке без таблиц, CSS свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом друг с другом в формате на основе столбца. Так как столбцы необходимы фактически в каждой схеме CSS, к этому свойству начали привыкать - и даже злоупотреблять им.
Свойство float в CSS , позволяет разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float , то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования - которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.
В этой статье мы расскажем, что такое свойство float и как оно влияет на элементы в специфических контекстах . Мы также обратим внимание на некоторые из различий, которые могут возникнуть в связи с этим свойством в наиболее часто используемых браузерах. Наконец, мы продемонстрируем несколько практических применений свойства float . Это должно обеспечить также всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.
Определение и синтаксис CSS-свойства Float
Цель свойства float состоит в том, чтобы, вытолкнуть блочный элемент влево или вправо, взяв его из потока документа. Это позволяет естественным образом текущему информационному содержанию обвалакиваться вокруг плавающего элемента. Эта концепция является аналогичной той, которую вы видите каждый день в печатной литературе, где фотографии и другие графические элементы, выровненные по какой либо стороне, а информационное наполнение (обычно текст) течет естественно вокруг элемента выровненного вокруг левого или правого края.
На изображении выше раздел “Читатели сайта ”.net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойства float в схемах размещения CSS, и она демонстрирует один из способов, который использован в табличном дизайне.
Эффективность использования float в многоколонной верстке была объяснена Douglas Bowman в 2004 в его классической презентации No More Tables :
Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в качестве образца. Float были заметно использованы в его ложной перестройке разметки Microsoft.
Синтаксис
Свойство Float может принимать одно из 4 значений: влево (left), вправо(right), без выравнивания (none) и наследованное (inherit). Это объявляется, как показано в коде ниже:
#sidebar { float: left; }
#sidebar { float : left ; |
Наиболее часто используемые значения это влево и вправо. Значение none или первоначальное значение float для какого-либо элемента HTML-страницы являются значением по умолчанию. Значение inherit (наследовать), к которому может быть применено почти к каждому свойству CSS, не работает в версиях Internet Explorer, включая 7.
Свойство float не требует применения любого другого свойства для элемента с float, однако, чтобы функционировать правильно, float будет работать более эффективно при определенных обстоятельствах.
Как правило, плавающий элемент должен иметь явно установленную ширину (если это не replaced element , например изображение). Это гарантирует, что float ведет себя как ожидалось и помогает избежать проблем в некоторых браузерах.
#sidebar { float: left; width: 350px; }
#sidebar { float : left ; width : 350px ; |
Особенности плавающих элементов
Ниже приводится список поведение плавающих элементов, согласно спецификации CSS2:
left-floated блок будет смещен влево до его левого края (или границы края, если край отсутствует) касается или края содержания блока, или края другого floated блока
Если размер floated блока превышает доступное горизонтальное пространство, то floated блок будет сдвинут вниз
Non-positioned, non-floated блочные элементы действуют, как плавающие элементы, т.е. находится вне потока документа
Края floated блока не совпадут с краями смежных блоков
Корневой элемент() не может быть floated
Встроенный элемент, тот который floated, преобразуется в элемент блочного типа
Float на практике
Наиболее часто используемым вариантом использования свойства float является плавающее изображение с текстом, обертывающим его. Например:
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.
CSS, применяемая к изображению в поле выше выглядит следующим образом:
img { float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; }
img { float : left ; margin : 0 15px 5px 0 ; border : solid 1px #bbb ; |
Единственное свойство, которое может добиться такого эффекта работы это свойство float. Другие свойства (margin и border) есть там по эстетическим причинам. Другие элементы в блоке (тэги
С текстом в них) не нуждаются ни в каких стилях.
Как упомянуто ранее, floated элементы выбиваются из потока документа, а другие блочные элементы остаются в потоке, действуя, так если бы floated элемент там даже не находятся. Это продемонстрировано визуально ниже:
This box is floated left
This
Element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.
В приведенном выше примере
элемент уровня блока, таким образом он игнорирует floated элемент, охватывающий ширину контейнера (за вычетом padding). Все элементы не floated, блочного типа будут вести себя аналогично.
Текст в абзаце является встроенным, поэтому он обволакивает floated элемент. Floated блоку также предоставляются параметры margin, чтобы сместить его из абзаца, делая его визуально чистым, чтобы элемент абзаца игнорировал floated блок.
Очистка floats
Проблемы расположения с floats обычно решаются использованием CSS свойства clear, которое позволяет вам “убрать” floated элементы с левой или правой или с обеих сторон.
Давайте рассмотрим пример, который часто встречается — нижний колонтитул (footer) обтекает правую сторону 2-ух клоночной разметки:
Left column floated left
Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу. Но в Firefox, Опере, Safari и Chrome, вы увидеть, что нижний колонтитул (footer) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое clear свойство, относительно нижнего колонтитула:
#footer { clear: both; }
#footer { clear : both ; |
Результат показан ниже:
Left column floated left
Right column also floated left
The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.
Свойство clear очистит только floated элементы. Применение clear таково: оба столбца не будут опускать нижний колонтитул, потому что он не floated элемент.
Поэтому пользуйтесь clear на не- floated элементах, и даже иногда на floated элементах, чтобы заставить элементы страницы занять свои отведенные места.
Фиксация Выпадания родителя
Один из самых общих признаков разметки с float, является “выпадение — родителя”. Это продемонстрировано в примере ниже:
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.
Обратите внимание, что основание floated изображения появляется вне своего родителя. Родитель полностью не расширяется, для содержания floated изображение. Это вызвано тем, что мы обсуждали ранее: floated элемент вне естественного потока документа, хотя все элементы блока отображаются, но floated элемента там как бы нет. Это не ошибка CSS, всё в соответствии со спецификациями CSS. Все браузеры делают то же в этом примере. Нужно сказать, что, в этом примере, добавляя ширину контейнера можно предотвратить проблему в IE, но нужно рештиь проблему и для Firefox, Opera, Safari, или Chrome.
Решение 1:Float для контейнера
Самый простой способ решения этой проблемы является float для родительского элемента:
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.
Теперь контейнер расширяется, чтобы уместить все дочерние элементы. Но к сожалению, это исправление будет работать только в ограниченном числе случаев, поскольку floating родитель может повлечь нежелательные последствия для вашего макета.
Решение 2: Добавление Дополнительной Разметки
Это — устаревший метод, но это простой вариант. Просто добавьте дополнительный элемент в нижнюю часть контейнера и «очистите» его. Вот как HTML-код будет выглядеть после реализации этого метода:
XHTML
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.
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. |
И в результате CSS применяется к новым элементам:
Clearfix { clear: both; }
Clearfix { clear : both ; |
Вы также можете сделать это посредством
тэг с действующим стилем. В любом случае, вы получите желаемый результат: родительский контейнер расширится, чтобы включить все его дочерние элементы. Но этот метод не рекомендуется, так как он добавляет несемантический код к Вашей разметке.
Решение 3: Псевдо-элемент after
:after псевдо-элемент добавляет некий элемент к выполненной странице HTML. Этот метод использовался весьма широко, чтобы решить проблемы float-clearing. Вот как выглядит CSS:
Clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
Clearfix:after { content : "." ; display : block ; height : 0 ; clear : both ; visibility : hidden ; |
Класс CSS “clearfix” применяем к любому контейнеру, который имеет дочерние элементы с float и не расширяется, чтобы включить их.
Но этот метод не работает для Internet Explorer до7 версии, поэтому для IE нужно применить один из следующих вариантов:
Clearfix { display: inline-block; } .clearfix { zoom: 1; }
Clearfix { display : inline-block ; Clearfix { zoom : 1 ; |
В зависимости от типа проблемы вы имеете дело с одним из двух решений, которые разрешат эту проблему в Internet Explorer. Следует отметить, что свойство zoom не является стандартом свойств Microsoft и поэтому ваш CSS станет не валидным.
Так, как псевдо — элемент:after не работает в IE6/7, получаем немного раздутый и мудрёный код, и требуется дополнительный недопустимый только для IE стиль, поэтому это решение не является лучшим способом, но вероятно, лучшее, из тех, что мы рассматривали до сих пор.
Решение 4: Свойство Overflow
Безусловно, лучший и самый простой способ решить проблему с выпадением родителя добавить overflow: hidden или overflow: auto к родительскому элементу. Это ясно, легко поддерживается, работает почти во всех браузерах и не добавляет лишней разметки.
Заметьте, что я сказал «почти» во всех браузерах. Это объясняется тем, что он не работает в IE6. Но, во многих случаях, у родительского контейнера будет установленная ширина, которая устраняет проблему в IE6. Если у родительского контейнера нет ширины, Вы можете добавить IE6-единственный стиль со следующим кодом:
// This fix is for IE6 only .clearfix { height: 1%; overflow: visible; }
// This fix is for IE6 only Clearfix { height : 1% ; overflow : visible ; |
В IE6, свойство height неправильно рассматривать как min-height, таким образом, это вынуждает контейнер включить свои дочерние элементы. Свойство Overflow затем устанавливается обратно в “visible”, чтобы гарантировать, что содержимое не скрыто или пролистано.
Единственный недостаток в использовании overflow метода (в любом браузере) является возможность того, что содержание элемента будет иметь полосы прокрутки или скроет информационное наполнение. Если есть какие-нибудь элементы с отрицательными margin или с абсолютным позиционированием в родителе, то они будут скрыты, если они выходят за пределы родителя, поэтому этот метод следует использовать осторожно. Нужно также отметить что, если бы у содержащегося элемента была бы указанная height или min-height, то Вы определенно не смогли бы использовать метод overflow.
Таким образом, на самом деле не просто кроссбраузерно решить данную проблему. Но практически любая проблема очистки float может быть решена одним из вышеупомянутых методов.
Связанные float ошибки в Internet Explorer
За эти годы имели место многочисленные статьи, опубликованные в сети, обсуждающие общие ошибки, связанные с float в CSS разметке. Все они, что не удивительно, имеют дело с проблемами характерными для Internet Explorer. Ниже, Вы найдете список ссылок на ряд статей, которые обсуждают связанные с float проблемы:
Изменение cвойства float при помощи JavaScript
Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к стилю объекта, преобразовывая намеченное свойство CSS в «Camel case” Например, свойство CSS “margin-left” становится marginLeft, свойство background-color становится BackgroundColor, и так далее. Но со свойством float, всё по другому, потому что слово float уже зарезервированно в JavaScript. Поэтому следующее будет неправильным:
Style . styleFloat = "left" ;
// For all other browsers
myDiv . style . cssFloat = "left" ;
Практическое использование Float
Floats могут быть использованы для решения целого ряда задач в CSS разметке. Некоторые примеры описаны здесь.
2-колонки, фиксированной ширины
3 столбца, Схема размещения Равной высоты
Floated изображение с заголовоком.
Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design описывает, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.
Горизонтальная навигация с неупорядоченными списками
Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness , в котором теги
