---
title: 'Проверка ваших навыков: floats'
slug: Learn/CSS/CSS_layout/Floats_skills
translation_of: Learn/CSS/CSS_layout/Floats_skills
---
<div>{{LearnSidebar}}</div>

<div></div>

<p>Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы будете работать над тремя небольшими задачами,</span></span> использующими различные элементы из пройденного материала.</p>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Вы можете опробовать решения в интерактивных редакторах ниже</span></span>, однако может быть полезным загрузить код и использовать онлайн инструменты такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>

<p>Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка или дальнейшая помощь")}} в конце страницы</p>
</div>

<h2 id="Floats_Раз">Floats Раз</h2>

<p>В этом задании вам необходимо чтобы два элемента с классами float1 и float2 обтекали слева и справа соответственно. Текст должен появляться между двумя блоками как на изображении ниже.</p>

<p><img alt="Two blocks displaying left and right of some text." src="https://mdn.mozillademos.org/files/17073/float-task1.png" style="height: 425px; width: 1067px;"></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример</span></span>:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 700)}}</p>

<div class="blockIndicator note">
<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
</div>

<h2 id="Float_Два">Float Два</h2>

<p>В этом примере элемент с классом float должен примыкать к левому краю и обтекаться справа. Далее мы хотим чтобы первая строка текста отображалась рядом с тем элементом, а следующая строка (с классом .below) отображалась под ним. Вы можете посмотреть желаемый результат на этом изображении.</p>

<p><img alt="A box displayed to the left of a line of text, with some more text below." src="https://mdn.mozillademos.org/files/17074/float-task2.png" style="height: 522px; width: 1373px;"></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример</span></span>:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}</p>

<div class="blockIndicator note">
<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float2-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
</div>

<h2 id="Float_Три">Float Три</h2>

<p>И наконец у нас есть обтекаемый элемент в этом примере. Блок оборачивающий обтекаемый элемент и текст отображается за ними. Используйте самый последний доступный метод чтобы фон тянулся за обтеканием как показано на изображении.</p>

<p><img alt="A block displayed to the right of some text both wrapped by a box with a background color." src="https://mdn.mozillademos.org/files/17075/float-task3.png" style="height: 427px; width: 1024px;"></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример</span></span>:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}</p>

<div class="blockIndicator note">
<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float3-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
</div>

<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>

<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>

<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>

<ol>
 <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
 <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
  <ul>
   <li>Описательный заголовок такой как "Требуется оценка теста по навыкам Float".</li>
   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
  </ul>
 </li>
</ol>