плавающие элементы


Содержание

CSS :: Плавающие элементы

css-свойство float

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

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

В качестве значений свойство float может принимать:

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

Пример №1. Использование плавающих элементов

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

В одном ряду разрешается расмещать несколько плавающих элементов. Если же ширины родительского элемента не хватит на все плавающие элементы, то некоторые из них будут смещены вниз. Следует отметить, что по умолчанию плавающие элементы не влияют на высоту родительского элемента, поэтому могут выходить за его пределы. Для устранения такой проблемы нужно либо заранее задать соответствующие размеры родительского элемента, либо воспользоваться свойством overflow (о нем чуть ниже), использовав значение auto или hidden , что заставит браузер автоматически рассчитать размеры родительского элемента с учетом плавающих элементов (см. пример №2).

Пример №2. Использование плавающих элементов

css-свойство clear

В CSS имеется возможность для блочных элементов сделать так, чтобы они не обтекали плавающие элементы, которые идут в html -коде выше. Для этого используется ненаследуемое свойство clear (см. пример №3), которое может принимать значения, определяющие обтекание каких плавающих элементов осуществлять не нужно:

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

Пример №3. Использование свойства clear

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

CSS Урок 20 Плавающие Элементы

Что Такое Плавающие Элементы CSS?

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

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

Как Ведут Себя Плавающие Элементы

Элементы плавают горизонтально, это означает, что элемент может плавать только слева или справа, но не снизу или сверху.

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

Элементы после плавающего элемента будут обтекать вокруг него.

Элементы до плавающего элемента не будут подвержены воздействию.

Если изображение плавает справа, следующий за ним текст будет пристыкован слева от него:

Пример

img
<
float:right;
>

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

Плавающие Элементы, Следующие Друг за Другом

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

Здесь мы сделали галерею изображений, используя свойство float:

Пример

.thumbnail
<
float:left;
width:110px;
height:90px;
margin:5px;
>

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

Отключение Float — Использование Clear

Элементы после плавающего элемента будут «плавать» вокруг него. Чтобы избежать этого, используйте свойство clear.

Свойство clear указывает, какие стороны элемента запрещены к воздействию других плавающих элементов.

Добавим строку текста к галерее изображений, используя свойство clear:

Пример

.text_line
<
clear:both;
margin-bottom:2px;
>

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

Еще примеры

Изображение с границей и полями, которое плавает справа от параграфа
Позволить изображению плавать справа от параграфа. Добавить границу и поля к изображению.


Позволить первой букве параграфа плавать слева
Позволить первой букве параграфа плавать слева. Оформить эту букву.

Создание горизонтального меню
Использование свойства float со списком гиперссылок с целью создать горизонтальное меню.

Создание главной страницы без таблиц
Используйте свойство float, чтобы создать главную страницу с заголовком, подвалом, левым столбцом (меню, например) и основным содержанием.

Все CSS Свойства Плавающих Элементов

Число в столбце «CSS» указывает, в какой версии CSS определено свойство (CSS1 или CSS2).

Плавающие элементы

Элементы, к которым применено свойство float , получили название «Плавающие» .

Свойство применимо ко всем элементам, кроме позиционированных.

Но не смотря на это свойство float совместно со свойством clear по своему влияют на позиционирование элементов на странице.

Обтекание текстом

В основном плавающие элементы применяются при обтекании какого-либо объекта (рисунок, изображение, текст в рамке и т.д.) текстом.

Плавающий объект смещается влево или вправо (значения left и right свойства float соответственно), а текст располагается на свободной стороне. Но не обязательно текст: это может быть все что угодно.

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

«img/peng_64.gif» style=» float : right ; «>

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

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

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

Значение none является значением по умолчанию для свойства float . При этом свойство никак себя не проявляет: элементы располагаются в привычном для всех порядке.

Расположение элементов по горизонтали

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

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

Напомним, что абзац ( тег

) — это блочный элемент. И по умолчанию абзацы располагаются друг под другом.

: #CC0033 solid 1px ; padding : 5px ; w >: 185px ; float : left ; «> Первый абзац

: #CC0033 solid 1px ; padding : 5px ; w >: 185px ; float : left ; «> Второй абзац

: #CC0033 solid 1px ; padding : 5px ; w >: 185px ; float : left ; «> Третий абзац

: 18px ; «> А это четвертый абзац.

А это четвертый абзац.

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

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

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

Но существует иной вариант.

Отменяем обтекание

Есть возможность отменить обтекание плавающего элемента.

Свойство clear вносит такую поправку.

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

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

: #CC0033 solid 1px ; padding : 5px ; w >: 185px ; float : left ; «> Первый абзац

: #CC0033 solid 1px ; padding : 5px ; w >: 185px ; float : left ; «> Второй абзац

: #CC0033 solid 1px ; padding : 5px ; w >: 185px ; float : left ; «> Третий абзац

: 18px ; clear : left ; «> А это четвертый абзац.


А это четвертый абзац.

Соответственно значение right свойства clear отменяет обтекание элемента, смещенного вправо с помощью свойства float , а значение both вносит запрет на обтекание элемента, смещенного в любую сторону с помощью свойства float .

Значение по умолчанию none отменит действие свойства clear .

CSS: Обтекание элементов

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

Плавающие элементы

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

  • left — смещает элемент влево
  • right — смещает элемент вправо
  • none — отменяет плавание элемента

Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).

Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.

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

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

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

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

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

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

Отмена обтекания

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

Для CSS свойства clear можно установить одно из значений:

  • left — плавающие элементы запрещены с левой стороны.
  • right — плавающие элементы запрещены с правой стороны.
  • both — плавающие элементы запрещены с обеих сторон.
  • none — разрешает наличие плавающих элементов с обеих сторон.

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

Проблемы float и их решения

В процессе верстки с использованием float-элементов вы непременно заметите некоторые странности в их поведении. Мы расскажем о наиболее часто встречающихся проблемах и способах их решения.

Проблема 1. Обтекание влияет на другие элементы

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

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

Элемент с классом .b4 пробует обтекать float-элемент .b3 , содержащийся в контейнере .wrapper , но поскольку .b4 не влазит в один ряд с .wrapper , он просто прижимается верхней стороной к этому ряду, из-за чего между блоками не остается свободного пространства. Как видите, элементу .b4 дополнительно задано свойство margin-top: 50px , эффект которого сейчас не заметен. Не зная причины, можно долго ломать голову, почему margin не работает. Однако, если посмотреть на элемент через инспектор кода, можно увидеть, что margin-top всё же работает, просто сейчас он никак не влияет на картину.

Как сделать, чтобы элемент .b4 перестал обтекать соседний? Конечно же, с помощью свойства clear , которое мы уже рассматривали ранее. Повторим еще раз:

Добавив этот код, мы получили такую картину:

Уже лучше, но отступ в 50 пикселей сверху так и не появился. Он всё ещё накладывается на верхний блок:

Такое впечатление, что элементу со свойством margin-top нет от чего отталкиваться. На самом деле, так и есть, потому что если мы проинспектируем элемент .wrapper , то увидим, что его высота странным образом стала равна нулю:

Проблема 2. Нулевая высота контейнера с float-элементами

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

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

Иными словами, из высоты блока-родителя просто вычитается высота float-элементов.

Как заставить родительский контейнер учитывать высоту содержащихся в нем плавающих элементов? Есть несколько способов решения этой проблемы. Мы расскажем о двух наиболее распространенных и эффективных хаках:

Micro Clearfix. Этот хак был придуман разработчиком по имени Nicolas Gallagher, и заключается он в добавлении нескольких строк CSS к псевдоэлементу :after родительского контейнера, потерявшего высоту:

Этот код работает во всех современных браузерах. Преимущество данного способа состоит в отсутствии необходимости писать лишний HTML-код.

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

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


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

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

Проблема 3. Перенос блоков при добавлении отступов

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

Выглядит неплохо, но нам не хочется, чтобы текст примыкал так сильно к боковым сторонам блоков. Чтобы сделать небольшие промежутки между текстом и внутренними границами блока, мы добавим padding слева и справа (сейчас он добавлен только сверху и снизу в размере 40 пикселей, а для боковых сторон указан 0):

И здесь у нас появляется проблема: одна из колонок съехала вниз. Это случилось из-за того, что ширина каждой колонки стала равна не 33.333333% , а 33.333333% + 10px + 10px. Как вы помните из предыдущего раздела учебника, полная ширина блока — это сумма чисел, в которую включена ширина содержимого, а также размеры боковых отступов, границ и полей.

Чтобы исправить эту проблему, используйте свойство box-sizing со значением border-box . Тогда браузер будет автоматически включать отступы, поля и рамку в заданную вами ширину блока:

Рекомендуем при создании сетки в CSS заблаговременно прописывать box-sizing , чтобы застраховаться от выпадания блоков при дальнейшей работе с сеткой.

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

Далее в учебнике: что такое адаптивный веб-дизайн.

Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки

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

Создание плавающих контейнеров при помощи float

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

Правило float позволяет нам создавать так называемые плавающие элементы. То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки картинок на веб-страницу.

У этого правила может быть три возможных значения:

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

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

Рассмотрим два блочных элемента. Для начала просто подсветим их фоном различным цветом с помощью правила background:

Так они ведут себя в обычном случае:

А теперь для первого div-а давайте пропишем правило float со значением left, и зададим ему отступы с помощью свойства margin для наглядности его взаимодействия с соседним тегом:

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

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

Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:

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

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

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

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

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

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

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

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

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

Правило Clear

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

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

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

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

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

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

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


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

Сайт об автомобилях.

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

Научным языком автомобиль это:

Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

Классификация автомобилей

Автомобили бывают следующих типов:

Все права защищены. © 2010 год.
Сайт об автомобилях.

Итак, мы выделили в отдельные блоки шапку ( . И вот так этот html-код будет отображаться в браузере:

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

.clr <
clear:both;
>
#leftbar <
float:left;
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 для соседних с плавающими блоками элементов.

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

Плавающие элементы

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

See the Pen css_positioning_float_images by Hexlet (@hexlet) on CodePen.

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

По таким значениям ясно, что элемент может обтекаться как слева, так и справа. Попробуйте в примере выше сменить правило float: left на float: right чтобы понять разницу. Для хорошего отображения также нужно будет «отзеркалить» отступы. То есть margin-right сменить на margin-left .

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

Такой эффект легко увидеть, если использовать свойство opacity , которое устанавливает прозрачность элемента, и отступ внутри блока.

Плавающие элементы

По умолчанию блочные элементы идут строго друг под другом. Изменить этот порядок можно сделав элементы «плавающими». Для этого служит CSS атрибут float. Он задает, по какой стороне будет выравниваться элемент: левой (left) или правой (right).

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

Per Apollinem medicum et Aesculapium, Hygiamque et Panaceam

juro, deos deasque omnes testes citans, mepte viribus

et judicio meo hos jusjurandum et hanc stipulationem

Illum nempe parentum meorum loco habiturum spondeo, qui

me artem istam docuit, eique alimenta impertirurum, et

quibuscunque opus habuerit, suppeditaturum.

Victus etiam rationem pro virili et ingenio meo aegris

salutarem praescripturum a pemiciosa vero et improba

eosdem prohibiturum. Nullius praeterea precibus

adductus, mortiferum medicamentum cuique propinabo,

neque huius rei consilium dabo. Caste et sancte colam et

Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки

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


Создание плавающих контейнеров при помощи float

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

Правило float позволяет нам создавать так называемые плавающие элементы. То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки картинок на веб-страницу.

У этого правила может быть три возможных значения:

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

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

Рассмотрим два блочных элемента. Для начала просто подсветим их фоном различным цветом с помощью правила background:

Так они ведут себя в обычном случае:

А теперь для первого div-а давайте пропишем правило float со значением left, и зададим ему отступы с помощью свойства margin для наглядности его взаимодействия с соседним тегом:

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

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

Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:

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

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

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

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

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

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

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

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

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

Правило Clear

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

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

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

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

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

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

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

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

Сайт об автомобилях.

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

Научным языком автомобиль это:

Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

Классификация автомобилей

Автомобили бывают следующих типов:

Все права защищены. © 2010 год.
Сайт об автомобилях.

Итак, мы выделили в отдельные блоки шапку ( . И вот так этот html-код будет отображаться в браузере:

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

.clr <
clear:both;
>
#leftbar <
float:left;
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 обтекание элемента. Плавающие элементы

Как сделать обтекание картинки текстом в HTML и CSS — 4.4 out of 5 based on 16 votes

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

Обтекание картинки текстом при помощи HTML

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

Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML: . Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

Где foto.jpg — это относительный путь к картинке..jpg

У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align=»left» по левому краю). Атрибут align имеет следующие значения:

  • left — изображение будет расположено по левому краю, а текст будет обтекать его справа;
  • right — изображение расположится справа, а текст будет обтекать его слева;
  • bottom — отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
  • top — тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
  • middle — при данном значении происходит выравнивание середины изображения по базовой линии строки.

Теперь рассмотрим каждый элемент на практике.

1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

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

3. Для выравнивания изображения по правому краю нужно соответственно прописать:

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

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

Обтекание картинки текстом при помощи свойств CSS

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

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

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

Теперь классу leftfoto нужно присвоить определенные CSS стили.

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

Разберем те элементы, которые мы здесь задали:

  • float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left».
  • margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.

Задача

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

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float , добавляемого к селектору IMG . Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5 CSS 2.1 IE Cr Op Sa Fx

Доклад лейтенанта Бокатуева

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

Пресс-релиз аналитической группы

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

Илон Маск рекомендует:  Книга - MySQL 5.0. Библиотека программиста
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL