Чем заменить float в css
Разделяй и властвуй — float, position и display
Поговорим о всем известном свойстве float, не менее известном position и их соседе — display.
Как известно, в css есть понятие «схема позиционирования». Этих схем позиционирования есть три вида — нормальный поток, поплавки и абсолютное позиционирование.
Теперь необходимо ввести некоторые термины, прежде чем написать то, что я хочу донести.
Документ — это наша страница.
Дерево документа — это структура, которую мы описали с помощью html в документе.
Для каждого элемента в дереве документа генерируется так называемый box. Назовём его контейнером, по-моему это достаточно точно отражает его смысл.
Также необходимо учитывать, что каждый элемент генерирует несколько контейнеров-потомков, для которых контейнер является содержащим (если он сгенерирован блочным элементом).
Контейнеры-потомки располагаются относительно содержащего контейнера, но им не ограничиваются, что может вызвать переполнение.
Конечно, всё немного сложнее, хотя нам можно не углубляться в дебри спецификации. Замечу лишь, что есть разные типы контейнеров, но оставим типы контейнеров на потом.
За что отвечает свойство display? Оно отвечает за тип контейнера (а иногда ещё и контейнера-потомка), который будет сгенерирован элементом.
В случае абсолютного расположения контейнера (position равно absolute или fixed), свойство display устанавливается в block, а float в none, независимо от того, что кто-либо написал в css.
В случае расположения контейнера, как поплавка (float не равно none), свойство display устанавливается в block, независимо от того, что кто-либо написал в css.
ps. Также хочу выразить благодарность товарищу с форума Вебмаскона, который сподвиг меня на написание этой статьи.
Верстка без float’ов
Существует много разных способов css разметки. Некоторые базируются на абсолютном позиционировании, другие используют float’ы. Первый метод плохо поддерживает «резиновость» макета, тогда как второй это неплохой способ разметки.
Но, как и многие мощные инструменты, float’ы имеют свои изъяны. Для начала, верстка на основе float’ов не такая простая к пониманию, а также float’ы есть источником многих багов (в основном в ИЕ), что делает их не идеальным вариантом в погоне за кроссбраузерностью.
Итак, речь далее пойдет о семантически корректном методе верстки.
Начнем с обычной разметки (основанной на div’ах)
Но div’ы не могут отобразить структуру документа, для этого семантически более подходят списки, потому как они, в отличие от div’ов передают иерархию и связи, которые присутствуют между элементами.
Использование CSS стилей
Для «хороших» браузеров, все достаточно прозрачно.
Стили для IE
В IE LI имеют значение display равным inline-block, поэтому:
1. Для IE Win используем
2. Для IE Mac —
Так как IE 5.1 имеет баги с математическими рассчетами, то нужно уменьшить ширину первого столбца, поэтому используем tjkdesign.com/articles/conditional_comments.asp» title«условные комментарии»>условные комментарии с условием «if lt IE 5.5000»
По сути на этом все… Далее в статье автор рассказывает как добавить границы, а также указывает на разницу в правилах для фиксированной и резиновой верстки.
Метод достаточно интересный, если отбросить поддержку морально устаревших браузеров, таких как IE5.5 и меньше, то правил станет значительно меньше. Этот метод позволяет просто и без забот решить проблему, когда нужно расстянуть 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:
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) не имеют высоты, если их «засунуть» в блочный элемент.
Верстка: Float’ы или Flex’ы?
Я новичок во фронтенде, изучаю вопрос создания сайта с нуля. Последнее время буквально мучает вопрос, что считают бывалые в этом деле насчет верстки сайта целиком на флексах (flex)? Вроде как и резина реализуется, и адаптив одновременно. Или же первые попытки лучше делать по старинке ДИВами и их размещать флоатами? Какая техника предпочтительнее?
P.S. Разумеется, надо попробовать и то и то самому и решить, но хотелось бы некой конкретики по этому поводу.
2 ответа 2
Однозначно стоит изучать flexbox в первую очередь.
Единственные доводы в сторону float :
Принципиальные различия
Предостережение
как flex-элементы работают с margin: auto; ( margin занимает оставшееся пространство в соответствующем направлении).
сочетание flexbox и абсолютного позиционирования.
взаимодействие flexbox-элементов c отрицательными margin и z-index (можно регулировать кто-то на кого «залазит» без абсолютного позиционирования).
Установим положительный z-index для первого элемента, что он «залазил» на второй (если уберём — то будет наоборот):
flexbox и таблицы. Можно tr установить display: flex; и получить адаптивность для строк таблицы. Например мы можем инвертировать расположение элементов в строках таблицы:
Чем float плох? Чем flexbox хорош?
Предполагается, что рассматириваем распложение элементов в строчку. При расположении в столбец некоторые приведенные ниже свойства будут работать по-другому.
Чтобы контейнер имел ненулевую высоту ему приходится всегда добавлять класс clearfix :
Для flexbox-контейнера такие «фокусы» не нужны.
Для flexbox-контейнера достаточно присвоить justify-content: flex-end; и нет необходимости располагать разметку в обратном порядке.
Нет никакого способа менять расположение элементов, не меняя разметку.
С помощью flexbox можно либо инвертировать расположение элементов с помощью присвоения контейнеру flex-direction: row-reverse; :
С помощью float невозможно без хаков гарантировать нахождение элементов на одной строке.
В flexbox такое поведение заложено по умолчанию ( flex-wrap: nowrap; установлено по умолчанию) и элементы не буду переноситься на новую строку без явного указания контейнеру flex-wrap: wrap; (или в редком случае flex-wrap: wrap-reverse; ).
Нет никакого контроля за вертикальным расположением элементов. Всё выравнивается «по верху» без возможности на это повлиять. Также нельзя установить элементам одинаковую высоту без установления фиксированной высоты всем элементам.
В общем, как можно увидеть flexbox несопоставимо мощней и намного выразительней вёрстки прошлых версий CSS. Поэтому крайне рекомендую его тщательно изучать, так как это воздастся сторицей.
Inline-block как замена float
Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float’ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?
Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float’а.
Что такое inline-block?
Обычная структура блочного элемента:
Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.
Inline block vs float: отличия
Для борьбы с промежутками можно использовать несколько техник. Удаление пробелов в списках:
Использование отрицательного значения margin:
Странный способ с отсутствием закрывающего тега LI:
Установка значения font-size на ноль:
Более подробно об этих способах можно прочитать в статье CSS-tricks.
Что использовать?
Выбор между inline-block и float необходимо делать, исходя из решаемых задач в конкретном дизайне. В итоге все сводится к отличиям этих двух инструментов:
Сетка изображений
Такие сетки используются в фотогалереях. На этом примере можно хорошо проиллюстрировать поведение inline-block и float. Использование float оправдано, если изображения имеют одинаковую высоту. Если же высота отличается, то элементы могут отображаться криво:
Inline-block’и не имеют такой проблемы, потому что располагаются на одном уровне в строке. Поэтому для верстки галереи лучше подойдет inline-block:
Вывод
Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.
Использованные материалы и полезные ссылки по теме: