На рисунке видно, что правила width и height для span-а не сработали и его размеры стали равны в соответствии с его содержимым.

Теперь добавим элементу span правило float со значением left:

Содержимое строчного элемента span

Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам . Причем не зависимо от того к какому элементу применяется правило, он становится блочным.

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

Содержимое строчного элемента span

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

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

Правило Clear

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

clear: left|right|both|none|inherit

При clear равном left элемент располагается ниже всех элементов, для которых у свойства float задано значение left. Если clear равно right, то отменяется обтекание по правой стороне. И both отменяет обтекание по обеим сторонам элемента. Значение none отменяет действие правила clear и это значение по умолчанию.

Добавим в предыдущем примере, для первого блока div правило clear:left:

Содержимое строчного элемента span

С помощью этого правила мы заставили блок div проигнорировать плавающий элемент слева от него.

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

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

Допустим мы хотим сделать двухколоночный макет с шапкой и подвалом страницы. В левом блоке у нас будет меню, а справа основное содержимое сайта. Для начала пропишем в html-коде соответствующие блоки:

Итак, мы выделили в отдельные блоки шапку (id="header"), левую колонку (id="leftbar"), область контента (id="content") и подвал (id="footer"). Перед блоками, которые должны располагаться ниже своих предшествующих соседей я поместил пустые контейнеры с атрибутом class="clr". И вот так этот html-код будет отображаться в браузере:

Как видно на рисунке, блоки выстроились по порядку сверху вниз. Блоки создали, теперь пропишем css стили для них (зададим для блока leftbar правило float, ограничим ширину leftbar-а и content-a и зададим фон для блоков):

Clr{
clear:both;
}
#leftbar{

Width:250px;
background:#E6EDF1;
}
#content{
width:750px;
background:#fff;
}
#footer{
background:#314451;
color:#fff;
text-align:center;
}

И смотрим, что получилось:

Видим, что благодаря правилу float:left блок leftbar стал плавать и содержимое блока content как бы обтекает его. Для того, чтобы этого не происходило зададим для блока content внешний отступ с помощью правила margin-left на 10 пикселей больше чем ширина блока leftbar:

#content{
width:750px;
background:#fff;
margin-left:260px;
}

И смотрим:

В итоге получили двух-колоночный макет сайта .

Итак, подведем итоги. В данной статье мы рассмотрели два css свойства, которые лежат в основе блочной верстки :

1. float — с помощью него создаются плавающие элементы и появляется возможность выстраивать блоки рядом друг с другом;
2. clear — отменяет действие float для соседних с плавающими блоками элементов.

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

В данном уроке мы расскажем о весьма важной теме, а именно о потоке HTML-документа, а также о способах управления им с помощью CSS-свойств float и clear.

Последовательность отображения элементов HTML

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

На скриншоте ниже - пример стандартного порядка вывода элементов:

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

CSS float

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

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

Давайте рассмотрим значения, которые может принимать свойство float. Их всего три:

• left - элемент выравнивается по левой стороне. Элементы, находящиеся ниже в потоке, обтекают его с правой стороны.
• right - значение, противоположное предыдущему. Элемент выравнивается по правой стороне, а элементы, находящиеся ниже в потоке, обтекают его слева по левому краю.
• none - элемент не обтекается и находится в своей обычной позиции.

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

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

Ниже показан наглядный пример работы свойства float со значениями left и right:

Как видите, CSS позволяет легко и быстро создать макет из нескольких колонок, используя всего лишь два свойства в паре - float и width . А задать обтекание картинки текстом еще легче - мы просто применили к ней свойство float:right .

Отмена обтекания: свойство clear

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

Сейчас на скриншоте обтекание после сайдбара не отменено, и блок-футер ведет себя странным образом, пытаясь обтекать элемент выше (но ничего не выходит, поскольку ширина как минимум одного элемента этого сделать не позволяет - элемент «застряет»):

Как сделать сброс обтекания? В этом нам поможет свойство clear и его значения:

• left - элемент, к которому применяется свойство clear:left, перестает обтекать элемент со свойством float:left, однако правое обтекание сохраняется.
• right - элемент, к которому применяется свойство clear:right, перестает обтекать элемент со свойством float:right, однако левое обтекание сохраняется.
• both - полностью отменяет обтекание со всех сторон. Элемент смещается вниз и образовывает стандартный поток. На следующие за ним элементы обтекание также перестает влиять.
• none - отменяет очистку clear. Элемент будет вести себя, как обычно, и на него будут влиять настройки float.

Воспользуемся полученными знаниями и зададим нашему футеру свойство clear:both:

В итоге футер выровнялся и разместился на своем месте. Кстати, также стал виден результат работы свойства margin-bottom:10px , которое было ранее применено к сайдбару.

Поддержка браузерами

Свойства float и clear поддерживаются всеми использующимися браузерами, включая IE6 и IE7.

Последнее обновление: 21.04.2016

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

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

right: элемент перемещается вправо

none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

Л. Толстой. Война и мир. Том второй. Часть третья

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

«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...

В данном случае мы получим последовательное размещение элементов на странице:

Теперь на той же странице применим свойство float , изменив стили следующим образом:

Image { float:left; /* обтекание слева */ margin:10px; margin-top:0px; } .sidebar{ border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin-left:10px; font-size: 20px; float: right; /* обтекание справа */ }

Соответственно изменится и размещение элементов на странице:

Элементы, к которым применяется свойство float , еще называют floating elements или плавающими элементами.

Запрет обтекания. Свойство clear

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

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

Свойство clear может принимать следующие значения:

left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, пусть на веб-странице будет определен футер:

Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:

Изменим стиль футера:

Footer{ border-top: 1px solid #ccc; clear: both; }

Теперь футер не будет обтекать изображение, а будет уходить вниз.

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

Итак, давайте разберём вот такой код:

Текст статьи

#left {
border-right: 5px solid #000;
float: left;
height: 400px;
width: 200px;
}
#right {
margin-left: 220px;
}
#right img {
float: left;
}

Какая была наша задача? Сделать 2 колонки: в левой колонке есть какой-то контент, в правой колонке есть статья. И у этой статьи есть картинка с float: left; (как и у левого блока). Затем мы хотим вывести блок с информацией о статье, безусловно, мы не хотим, чтобы эта информация была справа от картинки. Поэтому добавляем clear-блок . Однако, тут нас ждёт сюрприз.

Отменилось не только float: left; у картинки, но и у левого блока. Таким образом, информация о статье ушла вниз, поравнявшись с нижней границей левого блока (поскольку он выше). Как решить эту проблему? Очень просто, достаточно в блок #right добавить свойство overflow :

#right {
margin-left: 220px;
overflow: hidden;
}

Теперь всё встало на свои места. Свойство overflow отвечает за отображение того, что находится за пределами блока. И hidden сообщает, что будет отображаться лишь то, что находится внутри блока, а всё остальное будет скрыто. Именно это свойство и значение позволяет нам решить проблему с частичной отменой float в CSS .