Атрибут clear в HTML


Поток документа. Свойства float и clear

В данном уроке мы расскажем о весьма важной теме, а именно о потоке 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.

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

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

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

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

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

Илон Маск рекомендует:  Что такое код dup2

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

По умолчанию 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 для соседних с плавающими блоками элементов.

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

Атрибут clear

Обычно тег
предписывает броузеру немедленно остановить поток текста и возобновить его от левого края следующей строки (или от пра-

Рис. 4.14. Вывод текста возобновляется под рисунком

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

HTML и XHTML предоставляют возможность добиться этого при помощи атрибута clear тега
. Данный атрибут принимает одно из трех значений: left, right, all. Каждое из значений относится к соответствующему краю или к обеим сторонам окна (all). Там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков, броузер возобновляет отображение текста.

Илон Маск рекомендует:  Сколько стоит сайт построить

Вот как выглядит эффект атрибута clear при отображении следующего HTML-документа (рис. 4.14):

This text should wrap around the image, flowing between the

image and the right margin of the document.

This text will flow as well, but will be below the image,

extending across the full width of the page.

There will be white space above this text and

to the right of the image.

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

). Следовательно, атрибут clear тега
имеет смысл только с выровненными влево или вправо изображениями или таблицами. [тег , 5.2.6] [атрибут align (нежелателен), 10.2.1.1]

Следующий фрагмент XHTML-кода показывает, как используются тег
и его атрибут clear в сочетании с атрибутами тега для помещения подписей прямо над рисунком, справа по центру от рисунка и под рисунком, который выровнен по левому краю окна броузера:

Paragraph tags separate leading and following

text flow from the captions.

I’m the caption on top of the image.

This one’s centered on the right.

This caption should be directly below the image.

Рис. 4.15 иллюстрирует действие этого примера.


Рис. 4.15. Подписи, размещенные над рисунком, справа по центру от рисунка и под рисунком

Можно также вставить тег
сразу после тега или после таблицы, находящихся в самом конце раздела. Сделав так, вы получаете гарантию, что текст следующего раздела не всплывет из-под рисунка, приводя читателей в недоумение. [тег , 5.2.6]

clear (HTML attribute)

Description

The clear attribute is a deprecated (presentational) attribute that’s used to clear any preexisting right or left alignments. It ensures that the content after the br element appears beneath the baseline of the previously aligned element; the br doesn’t just create a line break in the content that’s flowing around the right- or left-aligned element.

In the past, this approach would most often have been used to stop content wrapping around a right- or left-aligned image or table.

The correct way of managing alignment issues is to use the CSS float property, rather than the HTML align attribute. To clear elements, we use the CSS clear property like so:

Note that you should avoid inline CSS styles—the inline style above is provided for direct comparison purposes only.

Example

This example shows a br with which a clear attribute is used to take content below a right-aligned image:

clear Attribute | clear

HTML (DHTML)

clear Attribute | clear Property

Sets or retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.

HTML
Scripting object . style.clear( v) [ = sClear ]
sClear String that specifies or receives one of the following values.
none Default. Floating objects are allowed on both sides.
left Object is moved below any floating object on the left side.
right Object is moved below any floating object on the right side.
both Object is moved below any floating object.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of none . The Cascading Style Sheets (CSS) attribute is not inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

The value of this property lists the sides where floating objects are not accepted.

The following examples use the clear attribute and the clear property to specify placement of text relative to floating objects.

This example uses a call to an embedded (global) style sheet to move the text below the floating objects when italic text is encountered.

This example changes the position of the paragraph relative to the floating object on its left side.

Атрибут clear

Обычно тег
предписывает броузеру немедленно остановить поток текста и возобновить его от левого края следующей строки (или от пра-

Рис. 4.14. Вывод текста возобновляется под рисунком

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

HTML и XHTML предоставляют возможность добиться этого при помощи атрибута clear тега
. Данный атрибут принимает одно из трех значений: left, right, all. Каждое из значений относится к соответствующему краю или к обеим сторонам окна (all). Там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков, броузер возобновляет отображение текста.

Вот как выглядит эффект атрибута clear при отображении следующего HTML-документа (рис. 4.14):

This text should wrap around the image, flowing between the

image and the right margin of the document.

This text will flow as well, but will be below the image,

extending across the full width of the page.

There will be white space above this text and

to the right of the image.

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

). Следовательно, атрибут clear тега
имеет смысл только с выровненными влево или вправо изображениями или таблицами. [тег , 5.2.6] [атрибут align (нежелателен), 10.2.1.1]

Следующий фрагмент XHTML-кода показывает, как используются тег
и его атрибут clear в сочетании с атрибутами тега для помещения подписей прямо над рисунком, справа по центру от рисунка и под рисунком, который выровнен по левому краю окна броузера:

Paragraph tags separate leading and following

text flow from the captions.

I’m the caption on top of the image.

This one’s centered on the right.

This caption should be directly below the image.

Рис. 4.15 иллюстрирует действие этого примера.

Рис. 4.15. Подписи, размещенные над рисунком, справа по центру от рисунка и под рисунком

Можно также вставить тег
сразу после тега или после таблицы, находящихся в самом конце раздела. Сделав так, вы получаете гарантию, что текст следующего раздела не всплывет из-под рисунка, приводя читателей в недоумение. [тег , 5.2.6]

Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Расположение и границы : clear

смотрим также
    Don kill ukraine нтв.

Материал из Справочник Web-языков

Содержание

Атрибут clear | Свойство clear

Это свойство устанавливает с каких сторон запрещено обтекание объекта.

Синтаксис

HTML
Скрипты [ sClear = ] object.style.clear[ = v ]

Возможные значения

sClear Строка, которая может определять и принимать одно из следующих значений:

none Значение по умолчанию. Обтекание объекта запрещено с обеих сторон.
left Запрещено обтекание с левой стороны. Объект будет располагаться выше любых других элементов, обтекающих его с левой стороны.
right Запрещено обтекание с правой стороны. Объект будет располагаться выше любых других элементов, обтекающих его с правой стороны.
both Запрещено обтекание элемента и с левой, и с правой сторон. Рекомендуется устанавливать это значение для свойства, когда точно неизвестно с какой стороны будет обтекание объекта.

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

Замечания

Значение свойства clear устанавливает с каких сторон недопустимо обтекание объекта. Если для объекта установлено обтекание с помощью свойства float, то свойство clear отменяет его действие для указанных сторон.

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

Примеры

Следующие примеры иллюстрируют применение свойства clear и атрибута clear для задания различных параметров обтекания объекта.

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

Во втором примере используется свойство clear для изменения местоположения параграфа текста по отношению к обтекаемому элементу.

Стандарты

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

Internet Explorer 5.5, 6.0, 7.0, 8.0

clear Attribute | clear

HTML (DHTML)

clear Attribute | clear Property

Sets or retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.

HTML
Scripting object . style.clear( v) [ = sClear ]
sClear String that specifies or receives one of the following values.
none Default. Floating objects are allowed on both sides.
left Object is moved below any floating object on the left side.
right Object is moved below any floating object on the right side.
both Object is moved below any floating object.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of none . The Cascading Style Sheets (CSS) attribute is not inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

The value of this property lists the sides where floating objects are not accepted.

The following examples use the clear attribute and the clear property to specify placement of text relative to floating objects.

This example uses a call to an embedded (global) style sheet to move the text below the floating objects when italic text is encountered.

This example changes the position of the paragraph relative to the floating object on its left side.

clear

На этой странице

Свойство clear CSS указывает, может ли элемент быть рядом с плавающими floating элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство clear применяется как к плавающим, так и к неплавающим элементам.

Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

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

Поплавки, которые имеют отношение к очистке, — это более ранние поплавки в одном и том же контексте форматирования блоков.

Заметка: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это — это заменит clear замененный ::after псевдоэлемент на нем.

CSS clear — обтекание картинки текстом html

Свойство CSS clear отвечает за управление обтеканием различных элементов (чаще всего текст, картинка). С помощью этого свойства можно запретить обтекания с какой-то из сторон (правой/левой).

Синтаксис CSS clear

  • left — отменяет обтекание элемента одновременно с левого края
  • right — отменяет обтекание элемента одновременно с правого края
  • none (по умолчанию) — ничего не делает, т.е. выравнивание будет как указано в float
  • both — отменяет обтекание элемента одновременно с правого и левого края
  • inherit — наследование от родителя

Это свойство очень полезно, чтобы начать с новой строки новые элементы. Приведем примеры.

Первая картинка показывает как бы располагались элементы со значением clear:none

Во второй картинке применено значение clear:both

Для обращения к clear из JavaScript нужно писать следующую конструкцию:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL