clear | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис
clear: none | left | right | both | inherit
Значения
- none
- Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
- both
- Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
- left
- Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
- right
- Отменяет обтекание с правой стороны элемента.
- inherit
- Устанавливает значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clear</title>
<style>
#layer {
float: left; /* Обтекание блока по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
width: 40%; /* Ширина блока */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div></div>
<p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
te feugat nulla facilisi.</p>
</body>
</html> Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства clear
Объектная модель
[window.]document.getElementById(«elementID»).style.clear
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear, соприкасающиеся с плавающими элементами (у которых задано свойство float) могут исчезать.
В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Как сделать запрет на обтекание элементов с помощью свойства CSS clear.
В прошлом уроке мы рассмотрели основные принципы работы свойства float. Но, при использовании свойства float можно столкнуться, например, со следующей проблемой.
<img src="//webgyry.info/logo.png"> <p>Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст.</p> <div>Блочный элемент</div>
Что произошло? Блочный элемент, который находился под элементом со свойством float:left просто поднялся наверх, на место, на котором он должен был бы находится если бы не было элемента img со свойством float left.
Как говорят в этом случае, дизайн «сломался». Так не должно быть, каждый элемент должен занимать свое место на веб-странице.
Чтобы решить эту проблему нужно поставить запрет на обтекание для блока div, который находится в самом низу.
Решение.
В CSS решить эту проблему довольно просто, нужно использовать свойство clear. Если добавить это свойство элементу, он перестает обтекаться относиться элементов, которым присвоено свойство float.
Синтаксис этого свойства следующий:
clear: none | left | right | both | inherit;
none — запрет на обтекание отсутствует
left — запрет обтекания по левой стороне
right — запрет обтекания по правой стороне стороне
both — запрет на обтекание по обоим сторонам
inherit — значение наследуется от родительского элемента
В большинстве случаев можно использовать значение clear:both, чтобы не задумываться с какой стороны нужно сделать запрет на обтекание.
<img src="//webgyry.info/logo.png"> <p>Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст.</p> <div>Блочный элемент</div>
Как видите, теперь блок встал на свое место и больше не подвергается действию свойства float:left для элемента img.
Свойство clear приходится довольно часто использовать на практике, когда на веб-странице используется обтекание объектов с помощью свойства float. Используйте это чтобы избежать выпадания блочных элементов из нормального потока при верстке веб-страниц.
Далее. Следующие уроки по CSS.
clear — запрет обтекания | CSS справочник
Поддержка браузерами
| 12.0+ | 5.0+ | 1.0+ | 1.0+ | 6.0+ | 1.0+ |
Описание
CSS свойство clear указывает с какой стороны текущего элемента не допускаются плавающие элементы (плавающими являются элементы, у которых CSS свойство float имеет значение right или left).
Если для элемента установлен запрет обтекания плавающих элементов с обеих сторон, то он будет смещён вниз — под плавающий элемент. Обратите внимание, что элемент будет смещён под плавающий элемент только в том случае, если плавающий элемент находится с той же стороны, с которой он запрещён у текущего элемента.
Рассмотрим на небольшом примере как работает свойство clear. На изображении, расположенном ниже, видно, что плавающий элемент с идентификатором sidebar частично перекрывает два блочных элемента.
Нам нужно сделать так, чтобы нижний блочный элемент не перекрывался плавающим элементом, для этого воспользуемся свойством clear для <div> с идентификатором footer и установим ему значение right. Таким образом мы указали, что с правой стороны элемента не может быть никакого плавающего содержимого, в результате чего он смещается немного вниз и располагается под плавающим элементом:
| Значение по умолчанию: | none |
|---|---|
| Применяется: | к элементам блочного уровня (в том числе и к самим плавающим элементам) |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.clear=»left» |
Синтаксис
clear: none|left|right|both|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| left | Плавающие элементы не разрешены с левой стороны. |
| right | Плавающие элементы не разрешены с правой стороны. |
| both | Плавающие элементы не разрешены с обеих сторон. |
| none | Разрешить наличие плавающих элементов с обеих сторон. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
img { float: left; }
p.clear { clear: both; }
</style>
</head>
<body>
<img src="logocss.gif">
<p>Это какой-то текст.</p>
<p>Это какой-то текст.</p>
</body>
</html>
Результат данного примера в окне браузера:
запрет обтекания css
Главная / HTML и CSS / Как запретить обтекание css
grigoriev
3405
Иногда ко мне обращаются с задачами по вёрстке. Вопросы задают как начинающие веб мастера так и владельцы сайтов у которых что то поломалось и веб страница перестала отображаться корректно. Часто это бывает при удалении какого либо элемента из документа, который отменял обтекание других блоков. По этому я решил написать заметку как сделать запрет обтекания css.
Первый способ убрать обтекание css это добавить родителю плавающего элемента свойство overflow: hidden.
.wrapper {
overflow: hidden;
zoom: 1; /*для ИЕ*/
}
Метод не всегда применим. Например если в блоке родителе есть элементы позиционируемые абсолютно, и они должны выходить за рамки родительского элемента ( выпадающее меню). Всё что выходит за блок-родитель будет обрезаться.
Второй способ. Помещаем после блока-родителя блок с свойством
<div>
<div></div>
<div>
<div>
<div></div>
<div></div>
</div>;
</div>;
<div></div>
</div>;
.clear {
clear:both;
font-size:0;
overflow:hidden; /* для IE */
}
Недостатком метода считается ухудшение семантики кода, так как пустой тэг див захламляет код.
Третий способ как можно убрать обтекание css это использование псевдо элемента :after. К сожалению IE не поддерживает :after до версии 7.0 включительно.
.wraprightcol:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Для ИЕ через условный комментарий подключаем
.wraprightcol {
overflow: hidden;
zoom: 1; /* for IE */
}
Ну и последниq способ, как можно установить запрет обтекания css это задать блоку ширину 100%, тогда другие плавающие элементы будут находиться под ним.
Поделиться:
You have no rights to post comments
Запрет обтекания элемета при помощи свойства clear
Довольна часто встречается ситуация, когда из-за того, что элементам задают различные параметры свойства float. Из-за этого другие элементы ведут себя не так как нам хотелось бы. Справится с такой ситуацией нам поможет свойство clear с параметром both CSS языка.
Давайте рассмотрим пример, когда это свойство необходимо. Допустим у нас есть такая HTML стурктра:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Страница</title> <link rel="stylesheet" href="/css/template.css" type="text/css" /> </head> <body> <div>div.left элемент</div> <div>div.right элемент</div> <div>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat </div> </body> </html>
И соответствующие CSS стили к нему:
body {margin:0; padding:10%; font-size:16px; color:#fff;}
div.left {width:50%;
float:left; /* прижимает див к левой стороне и позволяет элементам обтекать его справа */
background:#009966;
height:300px;
text-align:center;
font-size:88px;}
div.right {width:40%;
float:right; /* прижимает див к правой стороне и позволяет элементам обтекать его слева */
background:#CC3366;
height:300px;
text-align:center;
font-size:88px;}
div.clear {background:#666666;}
Посмотрев на код можно понять, два дива будут прижиматься к противоположным сторонам, а последний див будет содержать текст. Как вы думаете, это все будет выглядеть в браузере?
А вот как:
Так получилось, что последний див был зажат между двумя другими, почему такое произошло? Дело в том, что свойство float заставляет обтекать элемент, которому задается с противоположной стороны, которая задается этому свойству, это удобно для того, чтобы размещать два элемента на одной линии, но по разным краям, но вызывает проблему, если остается незаполненный промежуток, тогда в этот промежуток могут полезть элементы следующие дальше.
Если мы не хотим, чтобы структура сайта решилась по этой причине, то следующему элементу за таким нужно присвоить свойство clear, именно оно запрещает обтекание этим элементом. Это свойство принимает следующие параметры none — не запрещать обтекание; left — запретить обтекать элементы, прижатые к левой стороне; right — соответственно к правой; both — запретить обтекать любые элементы.
Если мы добавит следующий код в 15 строчку CSS стилей:
div.clear {background:#666666; clear: both;}
Тогда вот как это будет выглядеть в браузере:
Бывает по разным причинам, что такое свойство может мешать, либо после таких блоков у вас изменяющееся содержание, меняются элементы и устанавливать им всем это свойство неудобно, тогда между div.left, div.right элементами и последующими за ними ставят бесцветную разделяющую линию <hr> и ей задают это свойство. Результат будет аналогичен тому, что выше, но в некоторых ситуациях более удобен.
Отмена обтекания float
Отмена обтекания блоков (float) наиболее часто встречающаяся операция при верстке HTML страниц. Мы рассмотрим все известные способы отменить действие CSS свойства float.Прежде чем мы углубимся в методы очистки потока, давайте взглянем на проблему, которую мы пытаемся решить.
Типичный случай HTML верстки
Блоки .el-1 и .el-2 размещаются бок о бок внутри контейнера .container, и один элемент .main следует после .container:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример верстки</title>
<style>
.container {border:1px solid black;}
div {float:left;}
.el-1 {width:200px; height:120px; background: yellow;}
.el-2 {width:120px; height:100px; background: pink;}
.main {background: orange; height:50px;}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>
Мы хотим, чтобы высота контейнера .container была равной высоте самого длинного из его дочерних элементов (т.е. либо .el-1, либо .el-2) и чтобы блок .main, чтобы был после блока .container.
А вот, что мы видим: .container (черная рамка) схлопнулся, как будто в нем ничего нет, блок .main (блок с рыжим фоном) находится под блоком .container, как мы и хотели, но при этом он прячется за блоки .el-1 (с желтым фоном) и .el-2 (с розовым фоном). Черт знает что! Видел бы это мой начальник — непременно сказал бы мне,- «Используй, Шурик, табличную верстку». К счастью, времена, когда web-страницы верстались таблицами уже давно прошли и мы отлично обойдемся и без них. Не верите? Читайте дальше.
Несмотря на то, что многие считают это багом браузера, — это всего лишь принцип, по которому работают плавающие элементы. Следовательно нам нужно заставить родительский элемент расширяться, чтобы полностью вмещать дочерние элементы. Тогда, следующие элементы будут располагаться под контейнером.
Способ 1: метод старой школы
Как вам известно, CSS свойство clear устанавливает с какой стороны элемента запрещено его обтекание другими элементами, следовательно это свойство может предотвратить налезание элементов поверх плавающих. Идея заключается в следующем: вставьте пустой элемент, который свойство clear под обтекаемыми блоками. Это использовать определенный класс для подобного элемента — давно устоявшаяся традиция, так что вы можете использовать его в вашем HTML. Вот классический CSS код:
.clear {
clear: both;
}Который применим к нашей HTML верстке:
<section>
<div>Я обтекаемый</div>
<div>И я обтекаемый...</div>
<br>
</section>
<section>
Браво, вам удалось отменить обтекание
</section>Наш демо-пример, реализуемый с помощью этого метода:
Если вас не волнует схлопывающийся контейнер, а только неправильно расположенный блок .main, то вы можете также поместить «очищающий поток» элемент br после контейнера. Но, если вы решите сделать так, то гораздо проще будет просто добавить свойство
clearсамому элементу .main.
Это простой и понятный метод. Тем не менее, в современной верстке практикуется отделение контента от стиля, поэтому лучше его не использовать.
Способ 2: свойство overflow
Используя свойство overflow в теге .container, мы можем заставить контейнер расшириться до высоты размещенных элементов. Наш CSS будет выглядеть следующим образом:
.container {
overflow: hidden; /* или "auto" */
}Наш HTML останется таким же, каким и был изначально, без дополнительных элементов. Вот, что мы получим в итоге:
К сожалению, у этого метода есть недостаток: любой дочерний элемент, который выступает за пределы контейнера, будет либо обрезан (в случае overflow: hidden;), либо вызовет появление полос прокрутки (в случае overflow: auto;).
Способ 3: класс “clearfix”
Мы создаем класс .clearfix с псевдо-элементами ::before и ::after и задаем им display: table, что создает анонимную ячейку таблицы. Этот класс будет использоваться для очищения плавающих элементов. CSS код выглядит так:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}Изменим немного HTML код добавив к классу container класс clearfix:
<section>
<div>Я обтекаемый</div>
<div>И я обтекаемый...</div>
</section>
<section>
Браво, вам удалось отменить обтекание
</section>Вот результат работы наешго новвого класса:
если вам не нужна поддержка браузеров ниже IE8, то наш код значительно сократится:
.clearfix:after {
content: "";
display: table;
clear: both;
}Способ 4: значение contain-floats для min-height
Спецификация W3C добавила новое значение для свойства min-height (и для других свойств min/max), для решения этой проблемы. Выглядит оно так:
.container {
min-height: contain-floats;
}Этот код дает практически тот же эффект, что и clearfix, или overflow, но с помощью одной строки кода и, к тому же он лишен тех недостатков, о которых мы говорили ранее. К сожалению, пока ни один из браузеров не поддерживает это свойство, так что просто имейте его ввиду.
Итак, у вас есть целый набор различных «clearfix» методов. Применение класса .clearfix стало стандартом, и я очень рекомендую использовать его вместо прежних двух методов.
seodon.ru | CSS справочник — clear
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Свойство CSS clear используется для прерывания обтекания плавающих (всплывающих) HTML-элементов (свойство float) другими нижеследующими элементами.
Тип свойства
Назначение: форматирование.
Применяется: к блочным элементам.
Наследуется: нет.
Значения
Значением свойства clear является одно из ключевых слов управляющих запретом обтекания.
- none — разрешено обтекание любых всплывающих элементов.
- left — запретить обтекание элементов, которые всплывают влево.
- right — запретить обтекание элементов, которые всплывают вправо.
- both — запрет обтекания любых плавающих элементов.
- inherit — наследует значение clear от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: none.
Синтаксис
clear: none | left | right | both | inherit
Пример CSS: использование clear
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство clear</title>
<style type="text/css">
body { color: #ffffff; } /* цвет текста на странице */
.div1 {
height: 150px; /* высота блока */
background: red; /* красный цвет фона */
float: left; /* блок всплывает влево */
}
.div2 {
background: green; /* зеленый цвет фона */
}
.div3 {
background: blue; /* синий цвет фона */
clear: left; /* запрет обтекания */
float: right; /* блок всплывает вправо */
}
.div4 {
background: orange; /* оранжевый цвет фона */
}
</style>
</head>
<body>
<div>Всплывающий влево блок DIV1.</div>
<div>Этот блок DIV2 обтекает первый.</div>
<div>Этому блоку DIV3 запрещено обтекание элементов
всплывающих влево. А сам он еще и вправо всплывает.</div>
<div>Этот блок DIV4 обтекает оба плавающих элемента.</div>
</body>
</html>Результат примера
Результат. Использование свойства CSS clear.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значение inherit и прерывают обтекание не только для элемента, который имеет свойство clear, но и всех последующих.