diff options
Diffstat (limited to 'files/ru/web/css/clear/index.html')
| -rw-r--r-- | files/ru/web/css/clear/index.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html new file mode 100644 index 0000000000..1a0c6172b1 --- /dev/null +++ b/files/ru/web/css/clear/index.html @@ -0,0 +1,237 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - Справка +translation_of: Web/CSS/clear +--- +<div>{{CSSRef}}</div> + +<p>Свойство <strong><code>clear</code></strong> CSS указывает, может ли элемент быть рядом с плавающими <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="CSS/float">floating</a> элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство <code>clear</code> применяется как к плавающим, так и к неплавающим элементам.</p> + +<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> + +<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p> + +<p>При применении к неплавающим блокам он перемещает границу края <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">border edge</a> элемента до тех пор, пока не окажется ниже края <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.</p> + +<p>Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам - <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> нижнего элемента перемещается ниже <a href="/en-US/docs/CSS/box_model" title="CSS/box_model">margin edge</a> всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.</p> + +<p>Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">контексте форматирования блоков</a>. </p> + +<div class="note"> +<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> замененный {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p> + +<pre class="brush: css">#container::after { + content: ""; + display: block; + clear: both; +} +</pre> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: css no-line-numbers">/* Значения ключевых слов */ +clear: none; +clear: left; +clear: right; +clear: both; +clear: inline-start; +clear: inline-end; + +/* Global values */ +clear: inherit; +clear: initial; +clear: unset; +</pre> + +<h3 id="Values" name="Values">Значения</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.</dd> + <dt><code>left</code></dt> + <dd>Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить <em>левые</em> поплавки.</dd> + <dt><code>right</code></dt> + <dd>Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые <em>правые</em> поплавки.</dd> + <dt><code>both</code></dt> + <dd>Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.</dd> + <dt><code>inline-start</code></dt> + <dd>Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков <em>в начале содержащего его блока</em>, то есть <em>левые</em> поплавки на скриптах <strong>ltr</strong> и <em>правые</em> поплавки на скриптах <strong>rtl</strong>.</dd> + <dt><code>inline-end</code></dt> + <dd>Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков <em>в конце содержащего его блока</em>, то есть <em>правые</em> поплавки на скриптах <strong>ltr</strong> и <em>левые</em> поплавки на скриптах <strong>rtl</strong>.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="clear:_left" name="clear:_left">clear: left</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="left">Этот абзац очищается слева.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.left { + border: 1px solid black; + clear: left; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width: 20%; +} +.red { + float: left; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 50%; +} +</pre> + +<p>{{EmbedLiveSample('clear:_left','100%','250')}}</p> + +<h3 id="clear:_right" name="clear:_right">clear: right</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="red">- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="right">Этот абзац очищается справа.</p> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.right { + border: 1px solid black; + clear: right; +} +.black { + float: right; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 50%; +}</pre> + +<p>{{EmbedLiveSample('clear:_right','100%','250')}}</p> + +<h3 id="clear:_both" name="clear:_both">clear: both</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".</p> + <p class="both">Этот абзац очищает оба.</p> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.both { + border: 1px solid black; + clear: both; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: pink; + width:20%; +} +p { + width: 45%; +}</pre> + +<p>{{EmbedLiveSample('clear:_both','100%','300')}}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Добавляет значения <code>inline-start</code> и <code>inline-end</code>. </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Никаких существенных изменений, хотя детали уточняются.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> + +<p>{{Compat("css.properties.clear")}}</p> + +<div> </div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">Box model</a></li> +</ul> |