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

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

Как писать атрибуты?

Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

Атрибут=”значение” lang=”en”

Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

Абзац

Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.

Универсальные атрибуты

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

• accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

Ссылка будет открываться по нажатию сочетания клавиш с единицей

• class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
• С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
• При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
• dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .
• draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
• dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .
• hidden - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
• id задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.
• lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru , английский - en и т. п.).
• spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
• style позволяет задать оформление элемента с помощью CSS-кода.
• tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
• title - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.

• translate разрешает (yes) или запрещает (no) перевод содержимого тега.
• align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left ), по правому краю (right ), по центру (center) или по ширине (justify) . Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

Этот текст можно редактировать

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

Разберём каждый элемент строки.

- открывающий тег контейнера, хранящего абзац.

- закрывающий тег.

Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:

Атрибут=”значение” contenteditable=”true”

Форматирование каскадных таблиц). Этот язык существует с 1996 года и до сих пор продолжает развиваться. На данный момент разработчики используют уже третью версию CSS. С помощью языка программирования CSS возможно создать вполне красивый и приятный сайт, который не будет казаться устаревшим или неудобным для пользователя, даже если совершенно не применять JavaScript. Современные возможности третьей версии позволяют это сделать.

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

CSS Float - зачем он нужен?

Float - свойство для позиционирования элементов. Каждый день его можно наблюдать на страницах газет и журналов, смотря на картинки и текст, который очень аккуратно обтекает их вокруг. В мире кодов HTML и CSS при использовании функции Float должно произойти то же самое. Но стоит помнить, что редактирование изображений далеко не всегда является основным назначением этой функции. Ее можно использовать для создания популярного расположения элементов сайта в две, три, четыре колонки. На самом деле, свойство Float CSS применяется практически к любому html-элементу. Зная основы редактирования расположения элементов с помощью функции Float, а затем и Property, создать любой дизайн сайта не составит особого труда.

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

CSS Float описание свойства

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

У свойства Float есть четыре значения:

• Float:inherit;
• Float:right;
• Float:left;
• Float:none;

Для тех, кто знает английский, значения параметров свойства Float должны быть понятны. Но для тех, кто не знает, можно привести небольшое объяснение. Параметр :left; перемещает тело элемента в самый крайний левый угол родительского элемента. То же происходит (только в другую сторону) при bcgjkmpjdfybb параметра :right; . Значение :inherit; приказывает элементу взять на себя те же настройки, что и у родительского. Такие элементы еще называются дочерними, так как они располагаются непосредственно внутри родительского в html-коде. А свойство :none; позволяет элементу не нарушать обычного течения документа, оно устанавливается по умолчанию для всех частей кода.

Как Float работает?

Свойство Float CSS работает достаточно просто. Все, что было описано выше, можно сделать без особого труда. Дальше все будет так же просто. Но прежде чем продолжить изучение свойства Float, стоит немного разобраться в теории. Каждый элемент веб-сайта является блоком. Легко убедиться в этом, открыв консоль в Google Chrome нажатием Ctrl + Shift + J. Текст, заголовок, картинка, ссылки и все остальные составные части сайта будут отображаться блоками, просто разных размеров. Изначально все эти блоки идут друг за другом. Как видно на примере ниже, строки кода идут друг за другом, поэтому и отображаться они будут строго друг за другом.

Это называется normal flow (нормальное течение). При таком течении все блоки ложатся друг на друга (не пересекая тела элементов) вертикально. Изначально все содержимое веб-страницы расположено именно таким образом. Но при использовании, например, свойства языка CSS Float Left, элемент покидает свое естественное положение на странице и смещается в крайнее левое положение. Такое поведение неизбежно приводит к столкновению с теми элементами, которые так и остались в нормальном течении.

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

Функция Clear для решения проблем

У функции Float есть сердечный друг - Clear. Вместе они - Обе эти функции дополняют друг друга и делают разработчика счастливым. Как было указано выше, соседние элементы выходят из своего нормального течения и тоже начинают "плавать", как и элемент, к которому применили свойство Float (например, CSS Float Top). В итоге вместо одного плавающего элемента получаются два, причем совсем не в том месте, где их намеревался расположить разработчик. С этого момента как раз и начинаются все проблемы.

У функции Clear есть пять значений:

• :left;
• :right;
• :both;
• :inherit;
• none;

По аналогии можно понять, когда лучше всего применить функцию Clear. Если у нас написана строчка в коде Float:right; (CSS-код имеется ввиду), то функция должна быть Clear:right ;. То же самое качается и свойства Float:left; дополнять его будет Clear:left; . При написании кода Clear:both; получится, что элемент, к которому применяется эта функция, будет находиться ниже элементов, к которым применена функция Float. Inherit берет настройки у родительского элемента, а none не вносит никаких изменений в структуру сайта. Если понять, как работают функции Float и Clear, можно написать уникальный и необычный HTML и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде.

Использование Float для создания колонок

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

Теперь необходимо разобраться, что же здесь написано. Родительский элемент, в котором находится основная часть html-кода, назван контейнером (container). Он позволяет не дать элементам, к которым применена функция Float, разбрестись в разные стороны. Если бы его не было, то эти элементы уплыли бы до самых границ браузера.

Затем, в коде идут #content и #navigation. К этим элементам применяется функция Float. #content отправляется налево, а #navigation идет направо. Это необходимо для создания сайта из двух колонок. Обязательно нужно указать ширину, чтобы объекты не наложились друг на друга. Ширину можно указывать и в процентах. Так даже удобнее, чем в пикселях. Например, 45 % для #content и 45 % для #navigation, а оставшиеся 10 % отдать свойству margin.

Свойство Clear, которое находится в #footer, не дает нижнему колонтитулу последовать за #navigation и #content, а оставляет его на том же самом месте, на котором он и находился. Что может произойти? если не указать свойство Clear? В данном коде #footer просто-напросто пойдет вверх и окажется под #navigation. Это случится из-за того, что у #navigation достаточно места для размещения еще одного элемента. На этом наглядном примере очень хорошо видно, как свойства Clear и Float дополняют друг друга.

Неприятности, с которыми можно столкнуться при написании кода

Указанные выше примеры достаточно просты. Но и с ними могут возникнуть проблемы. Вообще, на самом деле, множество неожиданных неприятностей может случиться с функцией Float. Как бы ни было странно, но проблемы обычно возникают не с CSS, а с html-кодом. Место, где расположен элемент с функцией Float в html-коде, напрямую влияет на работу последней. Для того чтобы избежать различного рода затруднений, лучше всего придерживаться простого правила - располагать элементы с функцией Float первыми в коде. Почти всегда это работает и сводит к минимуму их неожиданное поведение.

Столкновение элементов

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

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

Но проблему столкновения элементов веб-страницы можно решить и по-другому. Существует еще по крайней мере два способа:

• использование функции Position;
• применение Flexbox.

Функция Position порой является неплохой альтернативой CSS Float. По центру веб-страницы в случае применения Position лучше всего расположить изображения. Если правильно применить значения:absolute и:relative, то элементы встанут на свои места и не будут накладываться друг на друга.

Разбор кода функции Position и Float

Стоит разобраться подробнее с тем, как в коде HTML и CSS Float заменить на Position. На самом деле это очень просто. Допустим, есть элемент #container и #div.

В данном примере использование во втором контейнере функции (CSS Div) Float поможет создать стандартный сайт из двух колонок. Никогда не стоит забывать о функции Clear. Без нее получится только наложение элементов друг на друга.

Итак, как же изменить код CSS и Float так, чтобы использовать Postion? Очень просто:

position:relative;

position:relative;

В таком случае #container и #div примут нужное разработчику положение в родительском элементе. Главное? поместить #div и #container в один родительский элемент, который будет соответствовать их размерам.

Flexbox - как эта функция поможет заменить CSS Float?

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

Flexbox не является свойством, а отдельным модулем. Поэтому flexbox поддерживает целый ряд свойств, которые работают только с ним. К тому же у функции display, которая имеет три параметра inline, block и inline-block в flexbox остается только одна flex-flow.

Как работает Flexbox?

Эта технология поможет разработчику легко выровнять элементы по горизонтали и вертикали. Также Flexbox может изменить направление и порядок отображения элементов. У этой технологии существует две оси: Main axis и Cross axis, вокруг которых и строится весь Flexbox. Также он убирает действие функций Float и Clear. Он строит свою систему в коде, в которой использует свойственные только ему свойства, поэтому, к сожалению, не удастся продублировать в элементах другие свойства, такие как Float и Position. А это было бы очень кстати, ведь, как говорилось выше, Flexbox работает только в новых версиях браузеров.

Стоит помнить, что в конечном итоге Position, Flexbox и Float делают одно и то же - создают необычный и оригинальный дизайн вашего сайта. Каждый вариант из рассмотренных в статье делает это по-своему и поэтому имеет как преимущества, так и недостатки. К тому же бывает, что где-то отлично подойдет функция Float (например, в сайте с простой структурой), а где-то лучше использовать Position или Flexbox.

Double Margin Bug

Однако иногда, к сожалению, у каждого разработчика возникают проблемы, связанные не с написанным кодом, а с багами в каком-то конкретном виде браузера. Например, в Internet Explorer существует баг, который называется Double Margin Bug. Он умножает параметр Margin на два, что приводит к смещению элементов сайта за границы браузера. Чтобы избежать этого, достаточно указать параметр Margin в процентах. Обычно этот баг происходит тогда, когда значение у свойства Margin и Float совпадает.

margin-left:10px;

Такой код сместит элемент в Internet Explorer на 20 px влево. Можно изменить код так:

margin-left:10%;

или же так,

margin-right:10px;

Оба эти варианта решат проблему смещения элементов.

Баги браузера и некорректное отображение сайта

Стоит помнить, что Internet Explorer - не единственный браузер, в котором могут возникать баги. Старые версии Google Chrome и Mozilla также некорректно отображают некоторые элементы современных веб-сайтов. Для каждого из этих багов можно найти решение. В целом хочется отметить, что использование Float создаст оригинальный и привлекательный дизайн сайта. Понимание основ и принципов работы этого свойства позволит избежать ошибок и облегчит жизнь любому разработчику.

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

Кроме того, эта статья содержит рекордное количество иллюстраций среди всего "Учебника " :-)

Судьба свойства "float" в CSS слегка похожа на судьбу тега "table" в HTML: ни то, ни другое вообще не задумывалось как средство создания колонок и вообще раскладки элементов. Однако из-за определенных несовершенств механизма позиционирования float используется для этой цели очень широко. А то, что придумывался он для другого, частенько проявляется разными неочевидными эффектами. Однако перед тем, как их показать, я все же расскажу, как float"ы можно применять для раскладки.

В самом начале - небольшое замечание о терминах. В русском языке не сложилось никакого известного термина для этого инструмента (пока, по крайней мере). Поэтому я предпочитаю писать его в исходном написании - "float". Читается это примерно как "флоут" (ломать скулы произношением "флоАт" не нужно). Заодно тут же прошу простить мне такие вольности как "заfloat"ить", "приfloat"нутый" и т.п. :-)

Принцип работы

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

При этом сам бокс и следующие за ним в потоке приобретают интересное поведение:

1. Float"нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.
2. Float"нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.
3. Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float"нутого бокса в потоке не было.
4. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float"нутый бокс со свободной стороны.

Хочу еще раз подчеркнуть неочевидную сразу вещь: сама коробка блока, следующего за float"ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.

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

Есть еще один маленький технический аспект, не обязательный для понимания всей "механики". Заfloat"ить можно как блочные боксы, так и строчные. При этом строчные тут же автоматически становятся блочными. То есть, писать display:block; для float"а излишне.

Из двух описанных особенностей float"ов - прижимание к краю и стыкование сбоку друг друга - вытекают два основных применения их в раскладке:

• разделение страницы на колонки
• горизонтально расположенные меню

Колонки

Колонки - это когда блоки текста расположены рядом друг с другом и имеют одинаковую высоту.

Все колоночные раскладки я буду рассматривать на вот таком простейшем HTML"ном коде с двумя блоками:

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

Пропорциональная ширина

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

#content { float:right; width:70%; } #sidebar { float:left; width:30%; }

То есть два блока float"ятся рядом в разные стороны, а их ширина делится в нужном процентном соотношении. Этот способ позволяет легко поменять колонки местами - просто поменяв значения right и left .

Растягивание только одной колонки

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

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

Итак, для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat"им на это место:

#sidebar { float:left; width:200px; } #content { margin-left:200px; }

Но у второго способа есть один очень серьезный недостаток. Обратите внимание, что в исходном HTML блок "sidebar" идет до блока "content" с основным содержимым. Не нужно думать, что так сделано случайно:-). Так сделано специально, потому что иначе этот самый второй способ с наложением колонки поверх margin"а не работал бы.

Как я написал в начале статьи, float"ы сдвигаются только в сторону и дают место следующим блоками, которые съезжают наверх. Поэтому принципиально, чтобы "sidebar" был уже наверху, и тогда основной блок подъедет к нему. Если "sidebar" идет после основного блока, то он так и останется ниже, и ни на какие колонки это похоже не будет.

Это действительно плохо, потому что перечеркивает одну из основных идей CSS: отделение оформления от содержания. Получается, что мы захотели изменить только дизайн, а если блоки расположены "не так", то придется лезть еще и в HTML-шаблоны. Кроме того, с точки зрения структуры могут быть свои веские основания располагать блоки так, а не иначе. Например чтобы пользователь мог начать читать основной текст страницы, не дожидаясь загрузки навигации.

Фиксированная ширина

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

Высота колонок

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

Этот некрасивый эффект можно обойти несколькими способами.

Первый способ называется "Ложные колонки" ("Faux columns"), опубликован в авторитетном веб-журнале A List Apart в сентябре 2004 года и с тех пор пользуется большой популярностью. Всем рекомендую прочитать либо оригинал , либо русский перевод . Однако если вы сегодня не в настроении кликать, то вот кратко его суть.

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

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

Недостаток же способа состоит в том, что поскольку у фоновой картинки есть только один размер, ее нельзя применять для пропорционально растягивающихся колонок, так как картинка тянуться не будет. А вот для случая, когда одна из колонок фиксирована по ширине, фон приспособить можно (этот случай, кстати, в "Faux columns" не рассмотрен).

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

Возьмем наш пример и сделаем колонку "sidebar" справа шириной 200 пикселов, а "content" пусть растягивается. Для "sidebar" подготовим картинку размерами 200х1 например ровного синего оттенка. А под "content" отведем желтоватый.

В стилях это выглядит так:

#sidebar { float:right; width:200px; } #content { margin-right:200px; } body { background:url(bg.png) #FFD right top repeat-y; }

Единственное правило для контейнера (body) задает все поведение фона:

• указывается URL картинки (bg.png)
• цвет фона в тех местах, где ее не будет (#FFD)
• положение картинки прижатой к правому краю (right top)
• повторение картинки вниз (repeat-y)

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

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

Идея его состоит в том, чтобы неравенство высот колонок спрятать, неимоверно удлинив их вниз, чтобы их концы были за пределами реального содержимого страницы. Добиваются этого тем, что сначала ставят колонкам очень большой отступ (padding) вниз, который закрашивается цветом фона. А чтобы все остальное содержимое тоже не сдвигалось туда далеко, колонкам назначается отрицательная граница (margin) такого же размера:

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

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

У моего примера, который я взял в самом начале, есть, правда, одна загвоздка. Там колонки лежат прямо в body . А если body проставить overflow:hidden , то браузеры отменяют скроллинг у страницы начисто. Даже если реальное содержимое выше окна. Поэтому колонки надо завернуть в еще один элемент, например div . Но справедливости ради надо сказать, что на практике колонки и так бывают во что-нибудь уже завернуты.

Засада

Куда ж без нее:-). Как я не особенно прозрачно намекнул в самом начале, поскольку float"ы не придумывались как средство создания колонок, это обязательно вылезет чем-нибудь уродливым и аукнется увеличением расхода анальгина (некоторые предпочитают темпалгин или парацетамол).

Причем "вылезет" - в прямом смысле. Давайте немного подвинем наш "голый" пример в сторону реальности, добавив над колонками шапку и внизу какой-нибудь тоже блок с текстом.

Для простоты выберем нехитрый колоночный дизайн с фиксированной шириной. Шапку и нижний блок сделаем синими с белыми буквами, основное содержимое белым, а дополнительную колонку тоже синей, но чуть светлее. Цвета колонкам зададим способом "Faux columns".

/* Раскладка в колонки */ body { width:600px; margin:0 auto; } #content { float:left; width:450px; } #sidebar { float:right; width:150px; } /* Цвета */ #main { background:url(bg.png) right top repeat-y; } #header, #footer { background:#238; color:white; }

Всякие отступы и шрифты я снова опустил для простоты восприятия. Добавим тестового текста и запускаем:

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

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

Теперь посмотрим на наш код. Оба float"нутых блока "content" и "sidebar" находятся внутри блока "main". И больше ничего в "main" нет. А раз ему нечего больше содержать, то его высота схлопывается в нуль! Поэтому и не видно на картинке ни белого фона "content", ни светло-синего фона "sidebar", потому что эти цвета назначены в виде фона "main".

Дальше - "footer". Он, подчиняясь все тому же правилу, тоже не видит float"нутых блоков и подтягивается наверх прямо к самому заголовку (поскольку "main" - нулевой высоты). Но в "footer" есть текст. Текст этот уже должен обтекать float"ы: справа "content" и слева "sidebar". Между колонками места не осталось, поэтому текст может начаться только под одной из колонок, которая первая кончится. Там он и есть. Таким образом, "footer", подтянувшись под заголовок, продолжается вниз, пока не закончится весь его текст. И весь этот синий фон, что ниже заголовка - это "footer" и есть.

Зачем такая сложность

Описанное поведение должно внушать недоуменние. Зачем надо было придумывать такие сложности: разделить понятие блока так, чтобы цвета и рамки наверх, а текст - на месте? Но смысл, конечно, есть. Это, наряду со схлопыванием границ , попытка заставить боксовую модель CSS нормально вести себя в условиях простого потока текста. Подробное классическое объяснение этому феномену есть все у того же Эрика Мейера в статье "Containing Floats " (на английском). Постараюсь кратко передать суть.

Представьте себе обычный поток абзацев - блоков с текстом - без всякого позиционирования. В одном из абзацев встречается картинка, которую хочется сдвинуть, скажем, влево, чтобы текст ее обтекал. Такое раньше в HTML достигалось свойством align="left" , но в духе вынесения оформления из HTML в стили, для этой функции как раз и придумали свойство float . То есть вместо align этой картинке приписывается float:left .

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

Решения

Итак, поведение с проваливанием понятно, но оно удобно для непозиционированного текста, а для раскладки - совсем неудобно. Существует два подхода устранящих оба проявления этого свойства: подтягивание следующих боксов наверх и проваливание через низ контейнера.

Для устранения подтягивания блоков существует специальное свойство - clear . Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float"ов. Причем можно управлять, с какого именно бока не должно быть float"ов:

Clear:left следит, чтобы float"ов не было слева clear:right следит, чтобы float"ов не было справа clear:both следит, чтобы float"ов не было с обеих сторон

Таким образом, если мы скажем нашему "footer"у:

#footer { clear:both; }

Чтобы слева и справа от него не было float"нутых колонок, то он сдвинется вниз как раз туда, где они обе кончаются.

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

Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float"ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет.

Другой интересный способ связан с побочным эффектом свойства overflow . Само по себе оно предназначено для того, чтобы определять, как будет вести себя контейнер при переполнении, когда не может вместить свое содержимое. У него есть четыре значения:

Visible содержимое переходит через край и его нормально видно (это поведение по умолчанию) hidden содержимое отсекается за границами контейнера и его там никак не видно auto если содержимое переполняет контейнер, у него появляется скроллбар, позволяющий проматывать содержимое, если нет - не появляется scroll похоже на auto , только скроллбар у контейнера есть всегда, даже когда содержимое его не переполняет

Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible , он вдруг растягивается и заключает в себя float"ы, которые в нем сидят, устраняя проваливание.

Какой же overflow использовать? Сразу отпадает scroll - всегда висящие скроллбары явно не нужны. Остаются auto и hidden , которые отличаются только тем, появляется скроллбар при переполнении или нет. Но у нас никакого переполнения нет, наоборот, этим свойством мы заставили контейнер дополнительно растянуться, чтобы он охватывал все свои элементы. Поэтому использовать можно любое значение.

Я суеверно стараюсь использовать hidden , чтобы не появлялось скроллбаров, если из-за каких-то глюков переполнение вдруг возникнет.

У решения с overflow есть одна загвоздка, связанная с поведением Некоторого Браузера™. Оно работает только если контейнеру явно назначены ширина или высота. Из-за этого им иногда неудобно пользоваться, когда вам нужны автоматические размеры, а не жесткие.

Итак, в итоге, чтобы исправить наш пример с колонками, надо сделать так:

#main { width:100%; overflow:hidden; }

Кстати! Если бы для рисования фона под колонками я использовал не faux columns, а способ с длинным padding"ом, то он бы потребовал использовать overflow:hidden для "main", что заодно решает и проблему с проваливанием. Но как бы тогда я про это рассказывал?

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

Меню

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

Возьмем такой список:

• Начало
• Каталог
• Корзина
• Справка

Чтобы это было похоже на меню, надо заfloat"ить все li влево, убрать у них атрибутику списка (отступы и буллиты) и еще добавить для красоты отступы, фон и рамку:

/* раскладка */ ul, li { float:left; list-style:none; margin:0; padding:0; } /* вид */ li { padding:2px 10px; font:Bold Small Tahoma; background:#35C; color:white; border:solid 1px; border-color:#46F #238 #238 #46F; } a { color:white; text-decoration:none; }

Обратите внимание, что для раскладки все свойства назначаются и для элементов ul , и для li . Это удобно свести в одно правило, потому что:

• float:left нужен элементам списка, чтобы они разложились горизонтально, а самому списку - чтобы элементы через него не проваливались;
• нулевые margin и padding устраняют отступы, которые браузеры делают для списков по умолчанию, но они это делают очень по-разному, поэтому проще сказать "всем всё по нулям", чем помнить что отдельно для какого элемента проставлять.

Мораль

Механизм float - еще одно средство раскладки наряду с абсолютным позиционированием.

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

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

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

Описание

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

Синтаксис

float: left | right | none | inherit

Значения

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства float

Объектная модель

document.getElementById("elementID ").style.styleFloat

document.getElementById("elementID ").style.cssFloat

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Описание

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

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

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

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

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

С помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку по правой и нижней стороне.

Попробовать »

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

Плавающие элементы не влияют на высоту родителя, то есть, если есть некоторый контейнер, а в нём находятся только плавающие элементы, то высота контейнера будет равна нулю. Решить данную проблему можно следующими способами:

1. Задать фиксированную высоту - в тех случаях, когда известно какая должна быть высота контейнера.
2. Применить свойство overflow со значением auto или hidden к контейнеру, тогда плавающие элементы будут учитываться при вычислении высоты контейнера. Этот способ можно использовать когда заранее не известно какая должна быть высота контейнера.

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

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float . Также свойство float не оказывает никакого эффекта на флексбоксы.

Похожие статьи