Float — Блочная верстка


Содержание

Доступно про float: left и как равномерно разместить блоки div на CSS

Ранее разметка страниц осуществлялась с помощью таблиц.

Роль свойства float возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right, left, но не center.

  • ПУНКТ
  • ПУНКТ
  • ПУНКТ
  • ПУНКТ
  • ПУНКТ
  • ПУНКТ

это HEADER h3

Если ему задать свойство display: inline;, то мы увидим, что изменилась не только ширина, но и расстояние над и под элементом:

это HEADER h3

Но если я хочу разместить элемент справа и добавлю на этот раз text-align:right;, то мы получим:

это HEADER h3

И совсем иначе, если float: right;. Обратите внимание, что расстояние над и под элементом остались неизменными:

это HEADER h3

А как поведут себя элементы, находящиеся рядом с заголовком?

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

это HEADER h3

А вот красный текст находится под заголовком и он будет его обтекать, не имея при этом никаких дополнительных стилей. И только высота h3 будет преодолена, страница вернётся к естественному порядку.

А Б В Г Несколько плавающих элементов будут соблюдать последовательность своего расположения.

А выравнивание производится по самому нижнему краю тех букв, которые находятся на одной стороне.

А Б В Г Если мы ходим, чтобы обтекание элемента было прекращено с определённого момента (отсюда), применяется свойство clear. Его мы можем добавить в пустой тег

, где border-spacing определяет горизонтальное и вертикальное расстояние между границами ячеек.

Теперь видно каким образом строится галерея изображений. Код картинок, надеюсь, никто не позабыл.

И последнее, что хочется показать — ситуацию, когда нужно достичь обтекания изображения с двух сторон. Собственно говоря картинка соответствует моему настроению, когда мне всё же удалось добиться этого эффекта.

#imagen-center равен #texto-L:before, #texto-R:before и составляет половину ширины изображения плюс 10px. #texto-R:before равна высоте изображения + 10px.

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 14. Блочная верстка сайта

Блочная верстка сайта

  • При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
  • К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак — это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

  1. Высота слоев div ограничена высотой контента:
  2. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.
  3. Фиксированный дизайн или
    жесткая блочная верстка (две колонки)

    • Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
    • Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
    • Основной блок с контентом размещается по центру, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

    Рис.1. Пример фиксированного дизайна

    • «Разбиваем» все основные элементы страницы на блоки следующим образом:
      • блок 1 — слой первый ( ),
      • блок 2 и 3 заключаются в единый блок ( ),
      • блок 2 — слой с меню ( ),
      • блок 3 — слой с контентом ( ),
      • блок 4 — слой с .

    Схематично изобразим расположение блоков:

    Свойство float

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

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

    Как работает float

    При применении этого свойства происходит следующее:

    1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left ) или вправо (для right ) до того как коснётся либо границы родителя, либо другого элемента с float .
    2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
    3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
    4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

    Элемент при наличии float получает display:block .

    То есть, указав элементу, у которого display:inline свойство float: left/right , мы автоматически сделаем его блочным. В частности, для него будут работать width/height .

    Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)

    Ширина float -блока определяется по содержимому. («CSS 2.1, 10.3.5»).

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

    Это пока только теория. Далее мы рассмотрим происходящее на примере.

    Текст с картинками

    Одно из первых применений float , для которого это свойство когда-то было придумано – это вёрстка текста с картинками, отжатыми влево или вправо.

    Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство float :

    Её HTML-код выглядит примерно так:

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

    Посмотрим, например, как выглядело бы начало текста без float:

    1. Элемент IMG вынимается из документа потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
    1. Элемент IMG сдвигается максимально вправо(при float:right ):
    1. Строки, в отличие от блочных элементов, «чувствуют» float и уступают ему место, обтекая картинку слева:

    При float:left – всё то же самое, только IMG смещается влево (или не смещается, если он и так у левого края), а строки – обтекают справа

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

    Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:

    Как видно из рисунка, параграфы проходят «за» float . При этом строки в них о float’ах знают и обтекают их, поэтому соответствующая часть параграфа пуста.

    Блок с float

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

    Посмотрим, как это работает, на конкретной задаче – сделать рамку с названием вокруг картинки с Винни.

    Верстка блоками DIV. С самого начала

    15.09.2015 в 12:27, joey

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

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

    Что считать блочным элементом?

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

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

    Добавим значение ширины для каждого блока:

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

    Теперь возникает вопрос, как расположить блоки div на одной строке, друг за другом?

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

    Свойство float имеет следующие значения:

    • left – блок выравнивается по левому краю, обтекание справа
    • right – блок выравнивается по правому краю, обтекание слева
    • none – обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

    Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

    В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

    Видно, что блок добавился как то криво. Кажется, что он добавился с новой строки под Блок 1. На самом деле, Блок 4 занимает место от начала Блока 1 и на 450 пикселов вправа. Вот посмотрите:

    Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством clear, которое управляет поведением плавающих элементов:

    • left – запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
    • rigth – запрещает обтекание элемента с правой стороны
    • both – запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

    Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

    Блок 4 разместился с новой строки, как нам надо.

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

    Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину – фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

    Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

    Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

    Почему собственно родителю мы дали класс .wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

    Возьмем разметку из предыдущих примеров и усовершенствуем её.

    Здесь вроде всё просто.

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

    И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

    Блок 1: 10 + 200 + 10 = 220px

    Блок 2: 10 + 150 + 10 = 170px

    Блок 3: 10 + 100 + 10 = 120px

    Блок 4: 10 + 450 + 10 = 470px

    220 + 170 + 120 = 510px

    Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

    Как поправить? Можно сделать следующее:

    1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
    2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

    Используем второй вариант, получается так:

    Теперь соберём всю полученную информацию воедино и попробуем создать простенький типовой трёхколоночный макет с резиновой версткой, который будет растягиваться максимально до 900px, после чего весь макет будет позиционироваться по центру.


    Создаем разметку макета:

    Если что-то непонятно — спрашивайте в комментариях.

    — Egor , 24.06.2020 в 13:37 ответить #

    — Роман , 04.12.2020 в 13:42 ответить #

    — joey , 12.12.2020 в 10:55 ответить #

    — Я новичок , 19.12.2020 в 06:04 ответить #

    Четыре различных способа создания HTML / CSS макета для сайта

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

    Первый день новой жизни

    В этой статье мы используем четыре различных способа верстки сайта:

    • Таблицы . Вам даже не нужно использовать отдельный файл стилей. И, что более важно, они не ломаются.
    • Float . Мы говорим о свойстве CSS . Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS .
    • CSS-фреймворки . Они работают так же, как JavaScript-фреймворки . Подключите исходный файл в заголовке (например,
    • ), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
    • Флексбокс . Флексбокс — это короткое название CSS Flexible Box Layout Module . Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.

    Теперь пора попробовать каждый из них.

    Способы создания

    Это дизайн моего сайта:

    Таблицы

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

    Вот мой HTML-код :

    И вот, что я получил:

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

    И вы увидите, что макет стал выглядеть так:

    Таким образом, можно легко определить, что где находится, если запутались.

    Теперь плохая новость. Еще раз посмотрите на HTML-код . Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:

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

    Вы указываете переместить

    Float

    Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:

    В нем есть три разноцветных элемента

    И вот, что у нас получилось:

    При верстке слоями вы указываете через свойство float , что хотите, чтобы ваш элемент

    Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты « на воду «, можно использовать свойство clear . Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.

    Вот как выглядит часть моего макета для основного контента:

    Теперь давайте сделаем ее плавающей:

    Мы добавили несколько стилей и получили что-то вроде этого:

    У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left и для изображений. Обратите внимание, как они обтекаются тегом

    . Этот макет выглядит, как ваш любимый журнал.

    CSS-фреймворки

    Если вы немного ленивы

    Если у вас нет времени возиться с кодом при CSS верстке , можно использовать один из CSS-фреймворков . В нашем примере мы используем Bootstrap . Для этого нужно скачать его и подключить в HTML-файле .

    Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

    В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.

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

    Я также добавил класс thumbnail , чтобы сделать постеры красивее. Он также содержится в Bootstrap .

    И вот, что я получил:

    Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS . Но вы не видите, что происходит внутри.

    Флексбокс

    Классика завтрашнего дня

    Мы будем использовать флексбокс, чтобы создать раздел сайта « Бокс-офис «. Вот HTML-код :

    Вот CSS-код для контейнера “ boxoffice ”:

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

    Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй — для заполнения гибких элементов. Рассмотрим подробно первый тип.

    По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction . Оно может принимать следующие значения: row , row-reverse , column и column-reverse . Мы будем использовать значение column . Давайте также добавим свойство height . Для чего это нужно, вы поймете чуть позже:

    Вот как выглядит наш небольшой бокс-офис:

    Мы использовали свойство height , потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.

    Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла . Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse . Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.

    Для этого мы используем свойство justify-content . Доступные для него значения: flex-start , flex-end , center , space-between и space-around . Для него нужно установить значение justify-content , которое эквивалентно flex-end .

    И вот каким образом отразились эти изменения:

    Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start , flex-end , center , baseline или stretch .

    Чтобы использовать его, добавьте свойство в селектор флексбокса:

    Все элементы сместятся к правому краю:

    Есть еще одно полезное свойство — flex-wrap . Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap .

    Попробуйте добавить следующий код:

    И вот, что в результате получится:

    Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap . При его применении элементы будут располагаться в один столбец ( или строку — это зависит от значения flex-direction ). Можно использовать значение wrap-reverse . Тогда элементы будут располагаться в обратном порядке.

    Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код .

    Какой из способов выбрать?

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

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

    Float . Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear . Этого достаточно для начала.

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

    CSS-фреймворки . Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.

    Флексбокс . Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.

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

    Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

    Данная публикация представляет собой перевод статьи « 4 Different HTML-CSS Layout Techniques to Create a Site » , подготовленной дружной командой проекта Интернет-технологии.ру

    Float — Блочная верстка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div-а между каждой из групп. Три элемента-контейнера, или три пустых div-а, что лучше для вашей задачи — решать вам.

    Проблемы с float

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

    • «Выталкивание» (pushdown). Возникает когда элемент внутри float-элемента оказывается шире его (обычно это изображения). Большинство браузеров обработает такие элементы вне float-структуры и вёрстка не будет сломана. IE расширит элемент, чтобы изображение влезло, зачастую это ломает дизайн. На картинке представлен пример, как изображение торчит из основного контента и таким образом «выталкивает» сайд-бар вниз. Самый просто способ избежать этого — это проверить что все ваши изображения подходят по ширине. Можно использовать overflow: hidden;, чтобы обрезать выступающую часть.
    • Двойной внешний отступ. Ошибка проявляющаяся в IE6, в случае если вы устанавливаете внешний отступ в том же направлении, в котором у вас указан float. В этом случае отступ удваивается. Чтобы исправить это, необходимо установить плавающему (float) элементу свойство display: inline;, не беспокойтесь, элемент по прежнему будет блочным.
    • Трёх-пиксельный прыжок (3px Jog). Ошибка, которая проявляется следующим образом: текст, который расположен рядом с float-элементом неожиданно съезжает на 3 пикселя. Чтобы избежать этого, необходимо установить ширину или высоту пострадавшему тексту.
    • В IE7 существует Ошибка нижнего внешнего отступа (Bottom Margin Bug) — возникает когда элемент с установленным свойством float, содержит в себе ещё один float-элемент. В таких случаях, нижний внешний отступ дочернего элемента игнорируется. Для обхода этой проблемы необходимо использовать внутренний отступ родительского элемента, вместо внешнего отступа дочернего.

    Альтернативы float

    Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module), который в будущем предоставит достойную альтернативу float.

    Раскладка в CSS: 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’ном коде с двумя блоками:

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

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

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

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

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

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

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

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

    Но у второго способа есть один очень серьезный недостаток. Обратите внимание, что в исходном 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» отведем желтоватый.

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

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

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

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

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

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

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

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

    Засада

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

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

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

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

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

    Чтобы понять, почему так происходит, надо вспомнить описание того, как работает 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»у:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Мораль

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

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

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

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

    Комментарии: 94 (особо ценных: 1)

    Спасибо! Ох, сейчас, почитаю. =))
    Ещё не прочитал, но пролистав страницу заметил краем глаза, что вы описываете меню . А вы в курсе что существует такой тэг как MENU =)) который технически равняется OL . только семантически более уместен =)
    Я просто сам обнаружил наличие подобного тэга только недавно. Уже успел его применить. Вроде как осложнений не вызывает.
    Может я чего-то про него не знаю — что объясняет столь редкое его использование . ?

    В курсе. Однако технически он не «равняется» OL. Хотя бы потому что у OL есть цифры. Если уж он и на что похож технически, то на UL.

    А вот семантически MENU — устаревший (deprecated) элемент, поэтому он как раз не более уместен, а совсем неуместен :-). Так что сейчас единственный хорошо подходящий элемент для навигационных меню — это UL.

    P.S. Кстати, в разрабатываемом HTML5 элемент MENU пересматривают. Возможно он будет реализован в виде нативного для платформы меню.

    Да. Хочу подчеркнуть, что это не вопрос вкуса или личных предпочтений:

    Последняя строчка там все точно объясняет.

    способа (уж незнаю как его назвать правильнее) в том, что нельзя повесить фоновый рисунок с background-position:bottom; если такой рисунок один, то его можно поместить фоном общего контейнера… но что делать, если он не один?
    PS: background-position: url(‘img1.png’), url(‘img2.png’), url(‘img3.png’)
    Мечты, мечты…

    Спасибо, отличная статья.
    Многое разъяснилось.

    Очень. Очень содержательно и читабельно!

    Рету:
    Спасибо. =) Был уверен, что что-то в этом роде и имеет место. Буду знать =)

    Особо ценный комментарий

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

    Итак, у нас есть колонки переменной ширины, левая 70% и правая 30%. Требуется положить под них фоновую двухцветную картинку так, чтобы левые 70% всегда закрывались одним цветом, а правые 30% — другим.

    Оказывается, достаточно сделать эту картинку очень длинной. Пусть будет 3000 пикселов. Делим ее на то же самое отношение: 2100 пикселов одним цветом, 900 — другим. А теперь:

    Вот эти 70% — это позиция фоновой картинки по горизонтали. Но работает она просто гениально: берется точка в 70% слева на картинке и совмещается с точкой в 70% слева ширины блока.

    А у нас как раз на картинке по 70% идет граница цветов, а по 70% блока — граница колонок. Вот так и получается, что эти границы всегда совпадают. А лишняя ширина картинки просто вылезает с обеих сторон за пределы блока, ее там не видно.

    P.S. Кстати, если подумать чуть дальше, то становится понятно, что позиционирование фона только так и может работать:
    — если поставить 0, то нулевая точка картинки совмещается с нулевой точкой блока — левое выравнивание
    — если поставить 50%, то середина картинки совмещается с серединой блока
    — если поставить 100%, то самая правая точка картинки (это и есть 100% от левого края) совмещается тоже с правой точкой блока

    Супер. Вы не хотите издаться в виде книжки?м Я Вас умоляю, продолжайте «учебник», а?

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

    Спасибо, очень хорошие уроки — доступным языком :)
    А не моглибы Вы в одном из следующих уроков пояснить разницу между id и class, хотелось бы ещё узнать как «правильно» составлять стили.

    Хочу добавить несколько линков по поводу обхода глючной поддержки float в Internet Explorer.

    Грубо говоря, на отдельно взятой HTML странице должен быть только ОДИН элемент с определенным id, в то время как тот же самый class может быть применен к множеству элементов. Или, другими словами, id уникально идентифицирует конкретный элемент, чтобы можно было потом обратиться к свойствам этого элемента (например через JavaScript) используя его id, а class — это удобный способ применить один и тот же стиль ко многим (не обязательно одинаковым) элементам.

    uncle.f, спасибо за разъяснение :)

    Вау, отлично, просто нет слов, нашел для себя несколько интересных моментов!
    вопрос — сколько уровней вложенности допускается в блоках (div’ах обычно).
    Сейчас «закапываюсь» в 5-6 уровней вложенности, а дальше — 10 допускается, а 20?

    Синтаксически можно, конечно, сколько угодно div’ов. На практике же для раскладки редко когда действительно нужно больше 3 уровней вложенности. И, кстати, это не обязательно дожны быть div’ы.

    Большое количество div’ов — это обычно следствие традиционного HTML’ного подхода к верстке, просто с заменой table -> div. Это исключительно неверно, и буквально через пару статей я напишу об этом подробно.

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

    Недавно возникла проблема, самизнаетекакой браузер наотрез отказался воспринимать overflow: hidden; по прямому назначению.
    Параллельно случайно решил перечитать эту статью учебника и, как оказалось, не зря:

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

    И действительно, помогло. Но загвоздка в том, что у этого блока ширина не определена, т.е. по сути она считается как 100% — 2px (однопиксельный бордер).
    Увы, так в css сказать нельзя.
    Как выход вижу только добавление еще одного когтейнера, семантика летит к чертям. Не хочется так.
    Возможно есть какой еще рычаг потайной или педали чтобы включить overflow в чудобраузере?

    Перенес обсуждение в форум.

    по поводу порушенной семантики и необходимости ставидь сайдбар выше контента:
    в силу оптимизационных причин необходимо контент (с h1 и текстом) ставить в самом-самом верху. делаем так:

    ну далее можно и faux columns или что там по вкусу.

    Посмотрите внимательней, я написал, что проблема с порядком следования колонок возникает только в случае, когда ширина одной из колонок не задана. Из-за этого их невозможно двигать margin’ами.

    Кстати, margin’ы в случае двух колонок лишние, тут вполне можно обойтись разными float’ами (left и right). А пример для трех колонок, как раз с margin’ами, можно посмотреть в одной из следующих статей «Пример верстки CSS»

    По поводу нескольких фоновых картинок и цветов.
    Я не проверял, но кажется, что ничего не мешает сделать так:

    И стили типа:
    .bg1

    .bg1 <
    background-image: url(bg2.png);
    background-position: 100% 20px
    >

    Громоздко, но, думаю, действейнно.

    Речь шла о нескольких картинок на одном элементе :-).

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

    Я обязательно напишу в «Учебнике» отдельную статью о том, почему вот это явление под названием «дивная верстка» — кошмар :-).

    Гм,
    можно использовать такой способ:

    Получить JavaScript-ом видимую высоту экрана, и назначить её как height всем колонкам, чтобы они были одного размера. А?

    content,

    отказывается в нём корректно работать. В случае если содержимого больше в «незаfoloat-нутой» колонке — всё нормально, но вот если наоборот — float-колонка беззастенчиво обрезается.

      Может быть вы проясните ситуацию: в вышеозначенном браузере при попытке сделать две колонки — одну float, а другую с margin, у той что с margin со стороны float-колонки появляется какой-то совершенно глупый padding в 4 пиксела. При применении лекарства (Holly Hack) этот padding пропадает, но появляется не менее глупый margin на этот раз уже шириной в 3 пиксела.
      Устраняется это недоразумение двумя css правилами:

    • html #float_left <
      margin-right: -3px;
      >
    • html #right <
      margin-left: [ширина #float_left — 3]
      >

    Как обьясняется это своеобразное поведение IE? И можно ли это обойти как-то более проще, чем я описал выше?

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

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

    По моим наблюдениям в Некотором Браузере побочный эффект от ovrflow вообще не проявляется. Ему главное — width: 100%; Поэтому если быть точным, то я бы сказал так:
    width: 100%; — для IE,
    overflow — для всех остальных.

    1. в сафари схлопываетса
      padding-bottom:32767px;
      margin-bottom:-32767px;
    2. float имеет by default width:100%;
      например в

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

    А как реализовать способ

    в опере? Опера совсем не солидарна здесь с Мозиллой и ИЕ.

    Я раньше не знал такое свойство как «clear:», поэтому подвал
    опускал вниз указанием width:ширина по главному контейнеру,
    , так он опускался под сайдбар и контент, но
    возникала проблема того что основной контейнер
    проваливался под все блоки раскладки. «Натянуть» его до низа
    было возможно применяя специальный класс /* Clearfix */ —
    это известный хак, который частоприменим. Как я понимаю,
    смысл его — поставить символ после следования всех блоков
    внутри главного контейнера, тогда контейнер будет вынужден
    растянуться до этого символа и вберет в себя все внутренние
    блоки.

    Вопрос: Знаете ли вы о таком хаке? Если да, то я не совсем
    понимаю расклад — ваш clear гораздо проще и чище чем этот
    хак. Значит либо люди не в курсе про clear, либо я не совсем
    понимаю значение данного хака и применял его однобоко — без
    понимания вопроса.

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

    По поводу дополнительного символа в clearfix. Если подвалу назначить clear, то он опустится вниз под float’ы, но не потянет за сабой фон контейнера, потому что сам в нем не находится. Clearfix использует тот факт, что :after находится как раз внутри контйнера, и поэтому тянет его за собой, когда опускается вниз. А символ этот, насколько я понимаю, нужен, чтобы элемент :after вообще сгенерировался, иначе его просто не будет.

    Я не упомянул его вообще в статье, потому что :after не работает в IE6. А значит в нем раскладка скорее всего будет сильно покорежена, и это не мелкое неудобство, на которое можно закрыть глаза. Вместо него я как раз рекомендую более практичное решение с overflow, которое в IE работает и тоже не требует дополнительных элементов в HTML.

    нужно разложить в 2 колонки, скажем s >


    просто все float’ить не получается ибо ширина main не известна.
    Проверено в Safari, FireFox и Opera (IE под рукой нет, да и шаблон не доделан пока. может в итоге это и не получится. )

    Алексей, хорошо бы, чтобы main ещё занимал 100% — 200px, а в этом случае этого врядли можно добиться :(

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

    Только что был изучен ещё один способ. Можно вместо левого отступа выставить любой overflow (кроме visible, естественно). А вдобавок к отступу — ещё и растянется на всю доступную ширину, совсем хорошо :)

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

    Супер!
    Актуальная информация понятным и доступным языком.
    Огромное спасибо!

    PVasili: Варианты с подложкой из графики,imho есть кривоватые

    • не подойдут для 3+колоночной вёрстки, в случае если средние колонки по высоте меньше 100%

    Нашел еще один способ заставить растягиваться div до размера float’ов.

    Плюс в том, что не надо указывать overflow: hidden, когда делаем выподающие меню и создаем наш pop-up в контейнер

    Работает в IE, FF. Не проверял в Опере.

    а зачем вообще float?
    чем не нравится, например:
    h1

    Потому что эта статья — про float. В «Учебнике» есть и другие статьи, есть и про абсолютное позиционирование и есть его пример.

    а зачем использовать float там, где можно без него обойтись? имхо.
    это довольно проблемное свойство.

    Я вот долго мучался, не знал как же сделать тянущиеся элементы, потом подсказали ваш блог:) Прочитал, сделал, получилось в FireFox 2, IE7, Opera 9 все так надо но, потом решил тестить поставил в виртуалке ещё одну винду с 6 ИЕ и там увидел старх. во-первых он откуда-то 3 пикселы дорисовал, ну ладно не смертельно хотя очень хотелось бы знать откуда?! Ну и главное там не работает overflow:hidden, почему? сайт sirena.com.ua можете зайти сами на главной єто хорошо видно.

    Довольно трудно понять, какой именно overflow не работает (в принципе-то IE6 его знает). Не могли бы вы обрезать сайт до пример, где была бы видна суть неработы и задать вопрос у меня в форуме: http://softwaremaniacs.org/forum/viewforum.php? >

    Salik
    У меня все работает нормально в 6-ом ослике.

    Выше давали ссылки про overflow.
    Вместо выставления контейнеру
    width: 100%;
    можно делать
    zoom: 1;
    Если интересно почему и как, поищите в msdn свойство hasLayout

    Комментарий относительно колонок, когда одна колонка фиксированной длины, а другая остальная ширина (margin-left: 200px)

    Так вот в эксплоере есть баг, из-за которого я зря прожил 2 часа жизни :)
    Если одному из контейнеров добавить высоту (например height:200px;) то между ними образуется расстояние этак в пикселов 5 — у меня просто в обоих дивах фон, который должен соединяться.

    Так что опасайтесь height если нужно чтобы дивы прилипали друг к другу.

    ЗЫ А гуру могут объяснить почему так height влияет.

    По поводу создания горизонтального меню из списка: по-моему, проще задать
    display: inline; margin-right: 20px;
    В самом списке убрать маркировку, как обычно.

    Ссылка на перевод статьи «Faux columns» испортилась (теперь по этому адресу живёт нечто иное). Вот ссылка на единственный перевод, который удалось найти: http://designformasters.info/posts/fauxcolumns/

    очень интересный сайт, написано все здорово, и проиллюстрировано тоже здорово

    но, есть одно неприятное но.
    когда скроллишь этот сайт в файерфоксе, скроллится рывками, что очень мешает читать.

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

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

    Вообще это проблемы с ФФ. Он во второй версии не слишком хорошо работает с прозрачными PNG’шками, в альфах третьего уже всё починили.

    Плюс автор работает под линухом, где эта проблема намного меньше видна, чем в винде. По крайней мере на моём компе. :)

    Огромное спасибо за статью. Очень много вопросов выяснил для себя, прочитав ее. Автор все крайне доступно, и интересно изложил. Респект!

    в опере? Опера совсем не солидарна здесь с Мозиллой и ИЕ.

    Да, я тоже с этим столкнулся: при использовании overflow: hidden появляется огромное «белое» пространство под основным содержимым

    . при дальнейшей правке эта пустота может сама собой исчезнуть. мда 8)

    Огромное спасибо, без вас бы не разобрался, особенно с Известным Браузером.

    Мегареспект и уважушища! Только что проваливались флоаты. Думал за бубном идти. Если под известным браузером понимается ИЕ, то как раз с ним опчему-то проблем не было.

    Maniac, читаю тебя не отрываясь :) Зачот! Памятник конный за этот учебник :)

    Если все так круто, то как вы объясните, что на этой странице 163 ошибки в html? Может сначало научимся сайты верстать, а потом других учить будем?

    Не ребят в самом деле тема классная. очень много умного узнал для себя.. но на Вашем cайте вот это:

    конечно похоже на лень наверное!

    В целом сайту респект.

    Этот вариант у меня везде работает, кроме IE8 Beta1. Не исследовали?

    А есть ли возможность задать блоку с заданным clear отступ от флоатов? Или только margin-bottom самим флоатам?
    Неужели clear:both и margin-top:Npx — вещи вообще несовместимые?

    clear тут не самый удачный вариант. Margin clear’нутого бокса будет проваливаться вверх, под float’ы, пока не достигнет границ контейнера, в котором float’ы лежат. Поэтому, вместо clear’а чаще используют overflow: hidden на контейнер float’ов, чтобы они из него не вываливались, он, соответственно, заканчивался после них, и тогда уже margin’ы следующих элементов нормально работают.

    А вот такой пример «из жизни». Надо сделать трехколоночный сайт. Разумеется с шапкой и подвалом. Только вот если использовать float для колонок, то внутри колонок его использовать уже не удасться (точнее, не удасться использовать clear).

    Можно попытаться использовать абсолютное позиционирование для колонок. Да только беда в том, что высота ни одной из колонок заранее не известна, т.е. min-height не прокатит. Можно было бы привлечь JavaScript или вообще вычислять высоту одной из колонок в скрипте, но уж больно это неблагодарное дело. Хоть я и отвык от таблиц, но без них тут, на мой взгял, никуда. Только не надо говорить про display: table — это где-то работает, а где-то нет — сайт то для людей делается, в основном лохов, а не гиков. Есть какие соображения по этому поводу?

    Статья действительно очень качественная и помогла мне в решении многих проблем с созданием вот такого вот макетика (http://pion.ru/zoo/float-layout.html)), который я в будущем возможно придумаю как использовать, но увы как же быть с Оперой, про которую тут уже спрашивали.

    При использовании такой конструкции

    только в опере, а также как утверждают IE8 Beta, действительно появляется немеряно белого пространства от которого не понятно как избавляться.

    Есть ли уже какое-нибудь решение? Без него как то сыровато выходит, на опере сидят многие.

    Можно наверное просто не пользоваться этими «хвостатыми» колонками, все таки хак довольно грязный :-). Всегда есть faux columns. А где не получается, что ж, есть пределы у CSSной раскладки в работе с колонками.

    только в опере, а также как утверждают IE8 Beta, действительно появляется немеряно белого пространства от которого не понятно как избавляться.

    Что самое интересное, в некоторых случаях появляется, в некоторых — нет. Как-то зависит от содержимого колонок, но вычислить, что именно влияет на это, у меня не получилось.

    Очень долго блуждал по сети в поисках.
    и вот ура нашел одной статье больше нужной информации чем в целой книжке на 300 стр.

    Огромное спасибо за учебник.

    Спасибо огромное за учебник!

    Наконец-то становится понятно, как это работает! :) Не могу описать, как становится хорошо, когда после двух дней работы над одной страницей, огромного количества часов в интернете и написания всего одной-двух строчек кода в конце, страница наконец принимает благопристойный вид!

    Огромная просьба — не оставляйте этот труд, продолжайте нас просвещать!

    Спасибо большое за статью.

    У вас вот здесь ошибка закралась:

    похоже на auto, только скроллбар у контейнера есть всегда, даже когда содержимое его не переполняет

    Float-нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера. А вот если в такой бокс поместить другой блок и задать для него height:100%, то float-нутый бокс раздвигается на всю ширину (наблюдается только в IE). Это стандартоное поведение бокса или очередной глюк IE? Как лечить?

    А вот еще засада с IE. При реализации двух колонок с растягиванием только одой колонки

    в IE6 в колонке #content появляется непонятный левый отступ 2-3 пикселя. Причем, на том уровне, где левая колонка заканчивается, отступ также заканчивается. Может кто встречался с такой проблемой. Как устранить?

    Решение вышеуказанной проблемы найдено:

    Таким образом устраняем устраняем непонятные 3px у плавающего элемента

    Оказывается, достаточно сделать эту картинку очень длинной. Пусть будет 3000 пикселов. Делим ее на то же самое отношение: 2100 пикселов одним цветом, 900 — другим. А теперь:
    div <
    background:url(bg.png) 70% 0 repeat-y;
    >>

    Только что обнаружил, что это не работает в IE7 и 8. Картинка у меня 4000 пикселов. Что делать не соображу, сайт рабочий, в подписи. Правило такое:

    body <
    width: 100%;
    font: 85% Verdana,Sans-serif;
    color: #E045CE;
    background: url(img/bg.gif) 75% 0 repeat-y;
    padding: 0;
    margin: 0;
    border: 6px solid #DAB88F;
    vertical-align: middle;
    >
    В других браузерах нормально.

    А кто мешает после content, sidebar и прочих флоатов, непосредственно перед закрывающим тэгом main, поставить пустой элемент со свойством clear:both? Тогда main растягивается по высоте и ничего не вываливается. Работает во всех актуальных версиях Опера, ФаирФокс, ГуглХром, Сафари, а также ИЕ7 и 8.

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

    Но ведь, если обе колонки находятся в одном контейнере, то можно у обоих колонок убрать отступ снизу и сверху.

    ** #sidebar <
    float:right; width:200px; margin-buttom:0; margin-top:0;
    >

    margin-right:200px; margin-buttom:0; margin-top:0;
    >
    **
    Тогда обе колонки будут растягиваться во всю ширину контейнера. (может я не прав, просто изучение CSS начал именно с этого учебника вчера))

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

    Иван, большое спасибо за статью — Вы действительно собрали все в одном месте о Float.

    Но вот ответа на свой вопрос о применении Float и его отмене в контенте, при использовании Float-колоночной раскладки сайта я к сожалению не нашел.

    Вот тестовая страничка (http://lrimi.ru/simple.html)), где требуется отменить Float для абзаца и заголовка. Если применить Clear:left или Clear:both, то абзац и заголовок «провалятся» ниже нижней границы левой колонки.
    Ведь Clear Float применяется не к последнему элементу со свойством Float, а жаль — как все было бы просто.

    Спасибо за статью.

    Наткнулся в итоге на статью, про флоаты. Не дочитал – так как монументально писано. Ложу себе ссылку на память.

    Может кому поможет)) ещё 1 вариант пофиксить баг IE (а именно 6ая версия). Если у Вас ситуация допустим, что в одном блоке размещается, несколько других блоков с float’ом. Допустим вы делаете фотогаллерею, где в блок галлереи будет вмещаться по 3 картинки вряд, а таких рядов у нас великое множество.

    Вот пример, где образуется сетка 2х2.

    Во всех браузерах будет отображаться всё без отступов и корректно. 2 картинки вместились в ряд, 3ья картинка пошла на следующий, ну итд.

    А вот IE6 будет рисовать отступы между каждым рядом. Нашёл как победить это, чем и делюсь с Вами. Нужно добавить font-size: 0pt; в #box. Получится следующее:

    Буду рад если кому-нибудь это поможет)

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

    Действительно, просто великолепные статьи пишите. Я в общем достаточно давно верстаю, но ваши статьи пролили свет на кучу моментов, используемых раньше интуитивно. Большое вам за это спасибо. Кстати, как там насчет книжки? ))Еще не дозрела идея до реализации? ))

    Спасибо огромное! Я учусь на курсах, и, как на зло, пропустила супер-важную тему позиционирования в css. C вашей помощью, наконец-то, поняла что к чему. Очень рада такому обстоятельству. Тем более, что все доступно написано. Еще раз спасибо.

    Я не буду здесь останавливаться на механизмах работы правила float, так о нем можно писать целые книги. Подробное объяснение на русском можно почепнуть в статье Ивана Сагалаева «Раскладка в CSS: float».

    Недавно на alist apart была статья CSS Floats 101. Нашел ее руский перевод здесь: Плавающие элементы и CSS. Мне кажется это прекрасное дополнения к вашей статье.

    Спасибо за статью! Очень полезная!

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

    Очень ценная статья! Я как начинающих верстальщик, не раз сталкивался, с подобным чудом и всегда меня выручали друзья, но теперь, я думаю, что смогу осилить эту «пакостную» тему!

    Спасибо огромное, с меня чай с бутиками))

    и контейнером с overflow:hidden контейнер должен иметь какую-то фиксированную высоту, по которой будет ограничивать колонки своим overflow. Получается, что колонки не растягиваются более высоты контейнера и способ весьма слабоват.

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

    Дело в том, что в CSS, к сожалению, нельзя напрямую сформулировать такую вещь как «вся доступная ширина минус конкретное число».

    Разбираем свойство float в CSS

    Дата публикации: 2010-02-22

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

    Свойство float в CSS, позволяет разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float, то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования — которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.

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

    Определение и синтаксис CSS-свойства Float

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

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    На изображении выше раздел “Читатели сайта ”.net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойства float в схемах размещения CSS, и она демонстрирует один из способов, который использован в табличном дизайне.

    Эффективность использования float в многоколонной верстке была объяснена Douglas Bowman в 2004 в его классической презентации No More Tables:

    Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в качестве образца. Float были заметно использованы в его ложной перестройке разметки Microsoft.

    Синтаксис

    Свойство Float может принимать одно из 4 значений: влево (left), вправо(right), без выравнивания (none) и наследованное (inherit). Это объявляется, как показано в коде ниже:

    Значения float css. Всё о свойстве float. Блочная верстка — создание колоночного макета с помощью float

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

    Ключевое слово

    У некоторых атрибутов есть зарезервированные значения, которые называются «ключевые слова». К примеру, значение атрибута type элемента определяет тип элемента формы. Ниже элемент создаёт кнопку.

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

    Строка

    Строка представляет собой текст, заключённый в двойные или одинарные кавычки.

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

    Чтобы корректно написать строку с внутренними кавычками есть несколько вариантов.

    1. Экранировать внутреннюю кавычку вот таким образом — \». В таком случае она уже не будет восприниматься браузером как кавычка, а считается символом.

    2. Использовать сочетание одинарных и двойных кавычек.

    Здесь строка у атрибута title взята в одинарные кавычки, поэтому мы спокойно можем писать внутри двойную кавычку.

    Всё это аналогичным образом работает и для одинарных кавычек.

    Адрес

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

    Различают абсолютные и относительные адреса.

    Абсолютные адреса

    Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан адрес и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В примере 1 приведена ссылка, в которой применяется абсолютный адрес.

    Пример 1. Использование абсолютного адреса в ссылке

    Блочная верстка или основы анатомии скелета сайтов

    Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

    Верстка сайта – ремесло для посвященных

    Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

    Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

    В процессе верстки кодом html происходит разбивка « скелета » сайта на части. А с помощью css ( каскадных таблиц стилей ) задаются размеры его « костей », цвет и расположение.

    Различают несколько видов верстки:

    I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег

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

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

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

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

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

    II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

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

    Основным недостатком блочной верстки является некая « двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится « доводить » путем использования специальных хаков.

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

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

    Основным элементом, применяемым в блочной верстке, является тег

    Как происходит блочная верстка?

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

    Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:

    Затем к готовой структуре сайта на html строкой
    прикрепляем файл css . После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

    Полный код примера index.html :

    Содержимое файла style.css :

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

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

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

    Свое роднее!

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

    Цукерберг рекомендует:  Помощь - Вопрос по языку swift
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих