path: root/files/ru/web/css/clear/index.html

---
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">Значения</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>

{{csssyntax}}

<h2 id="Examples">Примеры</h2>

<h3 id="clear_left">clear: left</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="left"&gt;Этот абзац очищается слева.&lt;/p&gt;
&lt;/div&gt;
</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">clear: right</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="red"&gt;- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="right"&gt;Этот абзац очищается справа.&lt;/p&gt;
&lt;/div&gt;
</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">clear: both</h3>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".&lt;/p&gt;
  &lt;p class="both"&gt;Этот абзац очищает оба.&lt;/p&gt;
&lt;/div&gt;
</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">Совместимость с браузером</h2>
<p>{{Compat}}</p>

<div> </div>

<h2 id="See_also">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">Box model</a></li>
</ul>