Practical positioning examples - Изучение веб-разработки

Practical positioning examples
==============================

* Назад
* Обзор: CSS layout
* Далее

Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.

| Предпосылки: | Основы HTML (уроки Introduction to HTML), и идея о том, как работает CSS (уроки Introduction to CSS.) |
| --- | --- |
| Задача: | Чтобы получить представление о практичности позиционирования |

Информационный блок с вкладками
-------------------------------

Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространённая функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:

![](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples/tabbed-info-box.png)

>
> \*\*Примечание:\*\*Вы можете увидеть, что готовый пример работает в прямом эфире info-box.html (source code). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи.
>
>
>

Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.

**Примечание:** Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как XMLHttpRequest. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.

Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — info-box-start.html. Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:

```html
<section class="info-box">
  <ul>
    <li><a href="#" class="active">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div class="panels">
    <article class="active-panel">
      <h2>The first tab</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum
        et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius
        libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt
        metus. Donec ultrices, urna maximus consequat aliquet, dui neque
        eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor
        urna. Nulla facilisi.
      </p>
    </article>
    <article>
      <h2>The second tab</h2>

      <p>
        This tab hasn't got any Lorem Ipsum in it. But the content isn't very
        exciting all the same.
      </p>
    </article>
    <article>
      <h2>The third tab</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an
        ordered list: how exciting!
      </p>

      <ol>
        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
        <li>Aliquam ut porttitor urna.</li>
        <li>Nulla facilisi</li>
      </ol>
    </article>
  </div>
</section>
```

Итак, у нас есть элемент `<section>` с `классом` `info-box`, который содержит `<ul>` и `<div>`. Неупорядоченный список содержит три элемента списка со ссылками внутри, которые станут фактическими вкладками для отображения наших панелей контента. `div` содержит три элемента `<article>`, которые будут составлять панели содержимого, соответствующие каждой вкладке. Каждая панель содержит некоторый образец контента.

Идея здесь заключается в том, что мы будем стилизовать вкладки, чтобы они выглядели как стандартное меню горизонтальной навигации и нарисуем панели, чтобы они сидели друг над другом, используя абсолютное позиционирование. Мы также предоставим вам немного JavaScript для включения на вашу страницу, чтобы отобразить соответствующую панель при нажатии вкладки и вы создадите саму вкладку. Вам не нужно будет понимать сам JavaScript на данном этапе, но вы должны подумать об изучении базового JavaScript как можно скорее - чем сложнее ваши функции пользовательского интерфейса, тем больше вероятность того, что вам понадобится JavaScript для реализации желаемую функциональность.

### Общая настройка

Для начала добавьте следующее между вашим открытием и закрытием `<style>` tags:

```css
html {
  font-family: sans-serif;
}

\* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
```

Это всего лишь общая настройка для установки шрифта sans-serif на нашей странице, используйте поле `border-box` `box-sizing` и избавьтесь от стандартного `<body>` поля.

Затем добавьте следующее ниже вашего предыдущего CSS:

```css
.info-box {
  width: 450px;
  height: 400px;
  margin: 0 auto;
}
```

Это задаёт конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого `margin: 0 auto` трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.

### Укладка наших вкладок

Теперь мы хотим, чтобы стиль вкладок выглядел как вкладки - в основном это горизонтальное меню навигации, но вместо того, чтобы загружать разные веб-страницы, когда они нажимаются, как мы видели ранее в курсе, они вызывают отображение разных панелей на той же странице. Сначала добавьте следующее правило внизу CSS, чтобы удалить по умолчанию `padding-left` и `margin-top` из неупорядоченного списка:

```css
.info-box ul {
  padding-left: 0;
  margin-top: 0;
}
```

**Примечание:** Мы используем селектор-потомки с полем `.info-box` в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы.

Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их `list-style-type` (en-US) имеет значение `none`, чтобы избавиться от пули и их `width` установлены на `150px`, чтобы они удобно располагались в информационном окне. Элементы `<a>` имеют `display` встроенный блок, поэтому они будут сидеть в строке, но всё же быть стильными и соответствующим образом оформлены для кнопок вкладок, используя множество других свойств.

Добавьте следующий CSS:

```css
.info-box li {
  float: left;
  list-style-type: none;
  width: 150px;
}

.info-box li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  line-height: 3;
  background-color: red;
  color: black;
  text-align: center;
}
```

Наконец, для этого раздела мы установим некоторые стили в состояниях ссылок. Во-первых, мы настроим `:focus` и `:hover` состояния вкладок, чтобы выглядеть по-другому, когда они сфокусированы / зависают, предоставляя пользователям некоторую визуальную обратную связь. Во-вторых, мы установим правило, которое ставит один и тот же стиль на одной из вкладок, когда на нем присутствует `class` of `active`. Мы установим это с помощью JavaScript при нажатии на вкладку. Поместите следующий CSS ниже других стилей:

```css
.info-box li a:focus,
.info-box li a:hover {
  background-color: #a60000;
  color: white;
}

.info-box li a.active {
  background-color: #a60000;
  color: white;
}
```

### Styling the panels

The next job is to style our panels. Let's get going!

First, of all, add the following rule to style the `.panels` `<div>` container. Here we simply set a fixed `height` to make sure the panels fit snugly inside the info-box, `position` `relative` to set the `<div>` as the positioning context, so you can then place positioned child elements relative to it and not the `<html>` element, and finally we `clear` the float set in the CSS above so that it doesn't interfere with the remainder of the layout.

```css
.info-box .panels {
  height: 352px;
  position: relative;
  clear: both;
}
```

Finally for this section, we will style the individual `<article>` elements that comprise our panels. The first rule we'll add will absolutely `position` the panels, and make them all sit flush to the `top` and `left` (en-US) of their `<div>` container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text `color` (en-US), and a `background-color`.

The second rule we'll add here makes it so that a panel with a `class` of `active-panel` set on it will have a `z-index` of 1 applied to it, which will make it sit above the other panels (positioned elements have a `z-index` of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.

```css
.info-box article {
  position: absolute;
  top: 0;
  left: 0;
  height: 352px;
  padding: 10px;
  color: white;
  background-color: #a60000;
}

.info-box .active-panel {
  z-index: 1;
}
```

### Adding our JavaScript

The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing `<script>` tags (you'll find these below the HTML content):
```

var tabs = document.querySelectorAll('.info-box li a');
var panels = document.querySelectorAll('.info-box article');

for(i = 0; i < tabs.length; i++) {
  var tab = tabs[i];
  setTabHandler(tab, i);
}

function setTabHandler(tab, tabPos) {
  tab.onclick = function() {
    for(i = 0; i < tabs.length; i++) {
      tabs[i].className = '';
    }

    tab.className = 'active';

    for(i = 0; i < panels.length; i++) {
      panels[i].className = '';
    }

    panels[tabPos].className = 'active-panel';
  }
}
```

This code does the following:

* First we save a reference to all the tabs and all the panels in two variables called `tabs` and `panels`, so we can easily do things to them later on.
* Then we use a `for` loop to cycle through all the tabs and run a function called `setTabHandler()` on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number `i` that indentifies the tab's position in the `tabs` array.
* In the `setTabHandler()` function, the tab has an `onclick` event handler set on it, so that when the tab is clicked, the following occurs:
    + A `for` loop is used to cycle through all the tabs and remove any classes that are present on them.
    + A `class` of `active` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same `color` (en-US) and `background-color` on the tab as the panels are styled with.
    + A `for` loop is used to cycle through all the panels and remove any classes that are present on them.
    + A class of `active-panel` is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its `z-index` to 1, making it appear over the top of the other panels.

That's it for the first example. Keep your code open, as we'll be adding to it in the second one.

A fixed position tabbed info-box
--------------------------------

In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:

![](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples/fixed-info-box.png)

**Примечание:** You can see the finished example running live at fixed-info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

As a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our Github repo.

### HTML additions

First of all, we need some additional HTML to represent the web site main content. Add the following `<section>` just below your opening `<body>` tag, just before the existing section:

```html
<section class="fake-content">
  <h1>Fake content</h1>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
</section>
```

**Примечание:** You can feel free to change the fake content for some real content if you like.

### Changes to the existing CSS

Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your `.info-box` rule to get rid of `margin: 0 auto;` (we no longer want the info-box centered), add `position``: fixed;`, and stick it to the `top` of the browser viewport.

It should now look like this:

```css
.info-box {
  width: 450px;
  height: 400px;
  position: fixed;
  top: 0;
}
```

### Styling the main content

The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:

```css
.fake-content {
  background-color: #a60000;
  color: white;
  padding: 10px;
  height: 2000px;
  margin-left: 470px;
}
```

To start with, we give the content the same `background-color`, `color` (en-US), and `padding` as the info-box panels. We then give it a large `margin-left` to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.

This marks the end of the second example; we hope you'll find the third just as interesting.

A sliding hidden panel
----------------------

The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.

Our finished example will look like this:

![](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples/hidden-sliding-panel.png)

**Примечание:** You can see the finished example running live at hidden-info-panel.html (source code). Check it out to get an idea of what you will be building in this section of the article.

As a starting point, make a local copy of hidden-info-panel-start.html from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:

```css
<label for="toggle">❔</label>
<input type="checkbox" id="toggle">
<aside>

  ...

</aside>
```

To start with here we've got a `<label>` element and an `<input>` element — `<label>` elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the `<input>` checkbox using the `for` and `id` attributes.

**Примечание:** We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.

Here we are going to use these elements for a slightly different purpose — another useful side effect of `<label>` elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known checkbox hack, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the `<aside>` element that follows the other two (we've left its contents out of the above code listing for brevity).

In the below sections we'll explain how this all works.

### Styling the form elements

First let's deal with the form elements — add the following CSS in between your `<style>` tags:

```css
label[for="toggle"] {
  font-size: 3rem;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
  cursor: pointer;
}

input[type="checkbox"] {
  position: absolute;
  top: -100px;
}
```

The first rule styles the `<label>`; here we've:

* Set a large `font-size` to make the icon nice and big.
* Set `position` `absolute` on it, and used `top` and `right` to position it nicely in the top-right corner.
* Set a `z-index` of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.
* Used the `cursor` property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.

The second rule sets `position` `absolute` on the actual checkbox `<input>` element, and hides it off the top of the screen. We don't actually want to see this on our UI.

### Styling the panel

Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:

```css
aside {
  background-color: #a60000;
  color: white;

  width: 340px;
  height: 100%;
  padding: 0 20px;

  position: fixed;
  top: 0;
  right: -370px;

  transition: 0.6s all;
}
```

There's a lot going on here — let's discuss it bit by bit:

* First, we set some simple `background-color` and `color` (en-US) on the info box.
* Next, we set a fixed `width` on the panel, and make its `height` the entire height of the browser viewport.
* We also include some horizontal `padding` to space it out a bit.
* Next we set `position``: fixed;` on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the `top` of the viewport, and set it so that by default it is offscreen to the `right`.
* Finally, we set a `transition` on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the `<label>` will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...
### Setting the checked state

There is one final bit of CSS to add — put the following at the bottom of your CSS:

```css
input[type="checkbox"]:checked + aside {
  right: 0px;
}
```

The selector is pretty complex here — we are selecting the `<aside>` element adjacent to the `<input>` element, but only when it is checked (note the use of the `:checked` pseudo-class to achieve this). When this is the case, we are setting the `right` property of the `<aside>` to `0px`, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.

So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.

Summary
-------

So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to building some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.

* Назад
* Обзор: CSS layout
* Далее
In this module
--------------

* Introduction to CSS layout
* Floats
* Positioning
* Practical positioning examples
* Flexbox
* Grids


Проверьте свои навыки: позиционирование - Изучение веб-разработки

Проверьте свои навыки: позиционирование
=======================================

Цель этого задания - чтобы вы поработали с CSS свойством `position` и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.

**Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

Если вы застрянете, попросите нас о помощи — см. раздел Оценка и дальнейшая помощь в конце страницы

Позиционирование Раз
--------------------

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

![The green box is at the top right of a container with a grey border.](/ru/docs/Learn/CSS/CSS_layout/Position_skills/position-task1.png)

Попробуйте обновить живой код ниже для воссоздания законченного примера:

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

**Примечание:** Для оценки или дальнейшей работы, загрузите отправную точку этого задания, чтобы работать в вашем собственном или онлайн-редакторе

Позиционирование Два
--------------------

В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.

![The content is scrolled but the sidebar has stayed in place.](/ru/docs/Learn/CSS/CSS_layout/Position_skills/position-task2.png)

Попробуйте обновить живой код ниже для воссоздания законченного примера:

**Примечание:** Для оценки или дальнейшей работы, загрузите отправную точку этого задания, чтобы работать в вашем собственном или онлайн-редакторе

Оценка и дальнейшая помощь
--------------------------

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

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

1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать:
    * Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
    * Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
    * Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
    * Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.


Фундаментальное понимание раскладки - Изучение веб-разработки

Фундаментальное понимание раскладки
===================================

Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.

| Необходимое условие: | Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле. |
| --- | --- |
| Цель: | Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле. |

Резюме проекта
--------------

Вам предоставили некоторый html, базовый css и изображения — ваша задача, создать раскладку для дизайна, который должен выглядеть как на изображении ниже.

![](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension/layout-task-complete.png)

### Базовые настройки

Вы можете скачать HTML, CSS, и набор из шести изображений тут.

Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем `images`. Открыв `index.html` файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.

Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.

![](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension/layout-task-start.png)

### Ваши задачи

Теперь вам нужно реализовать раскладку. Задачи, которые вам необходимо выполнить:

1. Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.
2. Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.
3. Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.
4. `<article>` и `<aside>` элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.
5. Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.

Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:

* Позиционирование
* Раскладка на Float
* Раскладка на Flexbox
* Раскладка на CSS Grid

Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на #mdn IRC канале.

Оценка работы
-------------

Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в отдельной дискуссии для этого задания или на #mdn IRC канале в Mozilla IRC. Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!


Позиционирование - Изучение веб-разработки

Позиционирование
================

* Назад
* Обзор: CSS layout
* Далее

Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения `position` и как их использовать.

| Необходимые знания: | Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.) |
| --- | --- |
| Задача: | Изучить как работает CSS позиционирование. |

Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию `0_basic-flow.html` из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.

Введение в позиционирование
---------------------------

Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.

Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство `position`.

### Статическое позиционирование

Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит "поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения".

Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте `class` `positioned` ко второму `<p>` в HTML:

```html
<p class="positioned">...</p>
```

А теперь добавьте следующее правило в конец вашего CSS:

```css
.positioned {
  position: static;
  background: yellow;
}
```

И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

**Примечание:** вы можете посмотреть живой пример на данном этапе на `1_static-positioning.html` (см. исходный код).

### Относительное позиционирование

Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление `position` в вашем коде:

```css
position: relative;
```

Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства `top`, `bottom`, `left` (en-US), и `right` которые мы объясним в следующем разделе.

### Введение в top, bottom, left, и right

`top`, `bottom`, `left` (en-US), и `right` используются вместе с `position` чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу `.positioned` в вашем CSS:

```css
top: 30px;
left: 30px;
```

**Примечание:** значения этих свойств могут принимать любые единицы которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.

Если вы сейчас сохраните и обновите, вы получите примерно такой результат:
```

<h1>Relative positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали `top: 30px;`, сила толкает блок, заставляя его перемещаться вниз на 30px.

**Примечание:** вы можете посмотреть пример на этом этапе на `2_relative-positioning.html` (см. исходный код).

### Абсолютное позиционирование

Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

```css
position: absolute;
```

Если вы сохраните и обновите, то вы должны увидеть нечто подобное:
```

<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее...

Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что `top`, `bottom`, `left` (en-US), и `right` ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является **исходным содержащим блоком**. См. раздел ниже для дополнительной информации).

**Примечание:** вы можете использовать `top`, `bottom`, `left` (en-US), и `right` для изменения размера элемента если вам надо. Попробуйте установить `top: 0; bottom: 0; left: 0; right: 0;` и `margin: 0;` для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните...

**Примечание:** Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

**Примечание:** вы можете посмотреть пример на этом этапе на `3_absolute-positioning.html` (см. исходный код).

### Контекст позиционирования

Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).

Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в **исходным содержащем блоке**. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент `<html>`. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента `<html>` и будет расположен относительно исходного окна просмотра.

Позиционируемый элемент вложен в `<body>` в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить **контекст** **позиционирования** — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего `body`:

```css
position: relative;
```

Это должно дать следующий результат:
```

<h1>Positioning context</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  Now I'm absolutely positioned relative to the
  <code><body></code> element, not the <code><html></code> element!
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

Позиционируемый элемент теперь располагается относительно элемента `<body>`.

**Примечание:** вы можете посмотреть живой пример на этом этапе на `4_positioning-context.html` (см. исходный код).

### Введение в z-index

Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?

Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:

```css
p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}
```

На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом `.positioned`, где они оба перекрываются. Это потому что параграф `.positioned` является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.

Можете ли вы изменить порядок наложения? Да, можете, используя свойство `z-index`. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения `z-index` влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют `z-index` `auto`, что фактически равно 0.

Для того чтобы изменить порядок наложения, попробуйте объявить для вашего `p:nth-of-type(1)` правила:

```css
z-index: 1;
```

Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:
```

<h1>z-index</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  Now I'm absolutely positioned relative to the
  <code><body></code> element, not the <code><html></code> element!
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}
```

Обратите внимание что `z-index` принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.

**Примечание:** вы можете посмотреть живой пример на этом этапе на `5_z-index.html` (см. исходный код).

### Фиксированное позиционированиее

А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), **фиксированное позиционирование** *обычно* фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.

Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила `p:nth-of-type(1)` и `.positioned` из вашего CSS.

А теперь, обновите правило `body` удалив объявление `position: relative;` и добавьте фиксированную высоту как тут:

```css
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
```

Теперь мы собираемся дать элементу `<h1>` (en-US) `position: fixed;`, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:

```css
h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}
```

`top: 0;` необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:

```css
p:nth-of-type(1) {
  margin-top: 60px;
}
```

Теперь вы должны видеть законченный пример:
```

<h1>Fixed positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">I'm not positioned any more...</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}
```

**Примечание:** вы можете посмотреть живой пример на этом этапе на `6_fixed-positioning.html` (см. исходный код).

### position: sticky

Доступно другое значение позиции называемое `position: sticky`, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.
```

<h1>Sticky positioning</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<div class="positioned">Sticky</div>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}
```

Интересное и общее использование `position: sticky` заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:

```html
<h1>Sticky positioning</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  <dd>Bee</dd>
  <dd>Banana</dd>
  <dd>Beanstalk</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
  <dd>Cane</dd>
  <dd>Camera</dd>
  <dd>Camel</dd>
  <dt>D</dt>
  <dd>Duck</dd>
  <dd>Dime</dd>
  <dd>Dipstick</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Egg</dd>
  <dd>Elephant</dd>
  <dd>Egret</dd>
</dl>
```

CSS может выглядеть как показано ниже. В нормальном потоке элементы `<dt>` будут прокручиваться вместе с контентом. Когда мы добавляем `position: sticky` к элементу `<dt>`, вместе со значением `top` 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.

```css
dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
```

```
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
```

```
<h1>Sticky positioning</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  <dd>Bee</dd>
  <dd>Banana</dd>
  <dd>Beanstalk</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
  <dd>Cane</dd>
  <dd>Camera</dd>
  <dd>Camel</dd>
  <dt>D</dt>
  <dd>Duck</dd>
  <dd>Dime</dd>
  <dd>Dipstick</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Egg</dd>
  <dd>Elephant</dd>
  <dd>Egret</dd>
</dl>
```

Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством позиции его предка.

**Примечание:** вы можете посмотреть живой пример на этом этапе на `7_sticky-positioning.html` (см. исходный код).

Проверь свои навыки!
--------------------

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.

Заключение
----------

Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.

* Назад
* Обзор: CSS layout
* Далее
Смотрите также
--------------

* Справка свойства `position`.
* Примеры практического позиционирования, для дополнительных полезных идей


Float - Изучение веб-разработки

Float
=====

* Назад
* Обзор: CSS layout
* Далее

Первоначально используемое для "обтекания" картинок текстом, свойство `float` стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.

| Предварительные требования: | Базовое знакомство с HTML (изучите Введение в HTML), а также идея о том как работает CSS (изучите Введение в CSS.) |
| --- | --- |
| Задача: | Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов. |

Общие сведения о float
----------------------

Свойство `float` вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.

Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как drop-caps (буквица).

Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как устаревшей техникой (en-US).

В этой статье мы сконцентрируемся только на надлежащем использовании floats.

Простой пример float
--------------------

Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый `index.html` файл на вашем компьютере, заполнив его простым шаблоном HTML, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.

Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:

```html
<h1>Simple float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

А теперь примените следующий CSS для вашего HTML (используя элемент `<style>` или `<link>` на отдельный файл `.css` — на ваше усмотрение):

```css
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу `.box`:

```css
.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:
```

<h1>Simple float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate.
</p>

<p>
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

Итак, давайте подумаем над тем, как работает float — элемент с установленным float (элемент `<div>` в данном случае) изымается из нормального потока документа и крепится с левой стороны от родительского контейнера (элемент `<body>` в данном случае). Любой контент, который следует ниже за обтекаемым элементом в макете при нормальном потоке теперь будет оборачивать его вокруг, заполняя пространство справа от него начиная на той же высоте что и вершина обтекаемого элемента. Там он остановится.

Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на `right` и замените `margin-right` на `margin-left` в последнем наборе правил, чтобы увидеть каков результат.

В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.

Добавьте класс `special` к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.

```css
.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
```

Чтобы эффект был лучше виден, измените `margin-right` обтекаемого объекта на `margin`, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.
```

<h1>Simple float example</h1>

<div class="box">Float</div>

<p class="special">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate.
</p>

<p>
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
```

Линейные блоки нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.

Очистка обтекания
-----------------

Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства `clear`.

Добавьте класс `cleared` ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:

```css
.cleared {
  clear: left;
}
```

```
<h1>Simple float example</h1>

<div class="box">Float</div>

<p class="special">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate.
</p>

<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

.cleared {
  clear: left;
}
```

Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство `clear` принимает следующие значения:

* `left`: очищает объекты, обтекаемые слева.
* `right`: очищает объекты, обтекаемые справа.
* `both`: очищает любые обтекаемые объекты, слева или справа.
Очистка блоков обёрнутых вокруг обтекаемых элементов
----------------------------------------------------

Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в `<div>` с классом `wrapper`.

```html
<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
```

В вашем CSS добавьте следующее правило для класса `.wrapper` и обновите страницу:

```css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
```

В добавок удалите класс `.cleared`:

```css
.cleared {
  clear: left;
}
```

Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.
```

<h1>Simple float example</h1>
<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>

<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.

### Clearfix hack

Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.

Добавьте следующий CSS в наш пример:

```css
.wrapper::after {
  content: "";
  clear: both;
  display: block;
}
```

Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как `<div>` ниже объекта и установили `clear: both`.
```

<h1>Simple float example</h1>
<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}
```

### Использование overflow

Альтернативный метод — это задать свойство `overflow` для обёртки (wrapper) на значение отличное от `visible`.

Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте `overflow: auto` к правилу для обёртки. Блок снова должен быть очищен.

```css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}
```

```
<h1>Simple float example</h1>
<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

Этот пример работает путём создания того, что известно как **Блочный Контекст Форматирования (block formatting context** (BFC)**).** Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.

### display: flow-root

Современный способ решения этой проблемы — это использование значения `flow-root` свойства `display`. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите `overflow: auto` из вашего правила `.wrapper` и добавьте `display: flow-root`. Если предположить, что у вас поддерживающий браузер, блок будет очищаться.

```css
.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}
```

```
<h1>Simple float example</h1>
<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
<p class="cleared">
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
  felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

.box {
  float: left;
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
```

Проверьте свои навыки!
----------------------

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. Проверка ваших навыков: Floats.

Заключение
----------

Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об устаревших методах макета (en-US) устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.

* Назад
* Обзор: CSS layout
* Далее