Очистка float

Метод 1: floats (плавающие элементы)

Большинство HTML элементов (, , , , , , и т.д.) по умолчанию имеют значение свойства равным .

Такие элементы по умолчанию занимают 100% ширины их контекста. Это делает невозможным расположение двух таких элементов рядом друг с другом без дополнительного CSS кода.

Этот метод требует добавления всего одной строки CSS кода для всех элементов с — или

Пример 2

Мы также можем легко создать пространство между двумя или более равномерно распределенными элементами с использованием свойства с правой стороны каждого элемента (). Кроме того, поскольку пространство нам нужно только между элементами, а не снаружи всего ряда, мы можем использовать селектор для таргетинга последнего элемента в каждом ряду.

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

Пример 4

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

Однако, чтобы эффективно использовать этот метод, вам нужно добавить так называемый «clearfix hack» к любому родительскому элементу, который содержит плавающие элементы. Без этого вы не сможете увидеть фон родительского контейнера, а также можете столкнуться с другими проблемами компоновки.

Преимущества

Поддерживается всеми браузерами.
Простой способ «расталкивания» элементов влево и вправо внутри родительского контейнера.
Простой способ реализации обтекания изображения текстом.
Элемент с будет помещен вторым по порядку (справа) на двух колоночной странице, несмотря на то, что он является первым элементом в исходном HTML коде. Иногда это может пригодиться.

Недостатки

Не может быть использовано для центрирования (горизонтального или вертикального).
Чтобы избежать проблем с отображением и компоновкой, требуется использование «clearfix hack» в родительском контейнере.
Float-элемент с фиксированной шириной (px) рядом с float-элементом c динамической шириной (%) может вызвать проблемы с компоновкой, если доступного горизонтального пространства окажется недостаточно.

CSS Float Examples

Now, let’s look at some specific use cases of the float property.

How do you float an image in CSS?

Let’s say you want an image to float to the right of the text in a container. You can use a type selector to target the image and define it with the rule float: left or float: right.

Here’s the CSS:

Here’s the HTML:

Here’s the result:

See the Pen CSS Float Property: Right Value by Christina Perricone (@hubspot) on CodePen.

Compare how the image appears on the page below when the float property is not applied.

See the Pen CSS Float Property: None by Christina Perricone (@hubspot) on CodePen.

How do you float other HTML elements in CSS?

As mentioned earlier, any HTML element can be floated in CSS, not just images.

Let’s say you want a button to float to the left of the text in a container. You can use a class selector to target the button class and define it with the rule float: left or float: right. You’ll also see CSS rules defining the color, size, border, padding, and margins of the button.

Here’s the CSS:

Here’s the HTML:

Here’s the result:

See the Pen CSS Float Property: Button by Christina Perricone (@hubspot) on CodePen.

How do you float multiple elements in CSS?

Now let’s say I want to float both elements — the image and button — to the left. The button will only go as far to the left as the image (and its margin settings allow). Take a look below.

Here’s the CSS:

Here’s the HTML:

Here’s the result (note: You may need to zoom out to 0.5x to see the full effect.)

See the Pen CSS Float Property: Multiple Elements by Christina Perricone (@hubspot) on CodePen.

Разбираем абсолютное позиционирование

Позиционирование — довольно хитрая штука. Многие новички застревают на моментах, когда нужно спозиционировать элемент на странице. И они обычно слабо используют, или наоборот — злоупотребляют — свойством position. Это свойство определяет, как будет сдвинут элемент относительно какой-то стороны (top, right, bottom и left). Оно принимает четыре значения:

static — значение по умолчанию, смещения не работают

relative — сдвигается визуальный слой, но не сам элемент

absolute — сдвигается элемент в окружающем контексте (первого не-статичного предка)

fixed — элементы позиционируются в области просмотра, неважно, какова его позиция в DOM

Обычно проблема возникает при использовании position: absolute. Возможно, вы уже сталкивались с подобным: задаете элементу абсолютную позицию, так как хотите, чтобы он смещался относительно верхнего правого угла родительского элемента (например, как маленькая кнопка закрытия модельного окна, или что-то похожее)

.element {
  position: absolute;
  top: 0;
  left: 0;
}

… а он отображается в верхнем правом углу окна. А вы думаете: “какого фига?”. На самом деле, это предопределенное поведение браузера. Ключевое слово здесь — контекст.

Вышеприведенный код на самом деле означает: “я хочу, чтобы мой элемент размещался в правом верхнем углу относительно его контекста”. Так что такое “контекст”? Это первый не-статичный предок. Это может быть прямой родительский элемент. Или родитель родительского элемента. Или родитель родителя родителя… И так будет произведен поиск до первого элемента, чье позиционирование не задано как static.

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

Вот простой пример, показывающий то, о чем мы только что говорили. Два родительских элемента, у каждого внутри дочерний элемент, который спозиционирован абсолютно значениями top: 0 и right: 0. Слева родительский элемент спозиционирован относительно (ожидаемое поведение). Справа родительский элемент оставлен статичным (неверно).

Пример 2

и последнее, но не менее важное, тег будет отображаться после плавающих элементов, как я использовал класс перед объявлением мой Теги, что гарантирует, что все плавающие элементы (слева/справа) очищаются до этого момента

Clearfix

переход к clearfix, который связан с поплавками. Как уже указано @Elky, то, как мы очищаем эти поплавки, не является чистым способом сделать это, поскольку мы используем пустой элемент, который является не элемент предназначен для. Следовательно, здесь идет clearfix.

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

чтобы самостоятельно очистить любой элемент обертки, имеющий плавающие элементы, мы можем использовать

Примечание псевдо элемент, используемый мной для этого . Это создаст виртуальный элемент для элемента-оболочки непосредственно перед его закрытием. Если мы посмотрим в dom, вы можете увидеть, как это проявляется в Дерево документа.

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

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

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

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

Using float correctly

Use when you want to pull an element to the side of a containing element while allowing other content to freely flow around it. There aren’t any other CSS methods for accomplishing this, so don’t be afraid to use it!

The valid values for are a single keyword from the following list:

: positions the element on the left side of its containing block
: positions the element on the right side of its containing block
: does not float the element
: positions the element on the first inline side of its containing block; this is the left side with left-to-right scripts and the right side with right-to-left scripts
: positions the element on the last inline side of its containing block; this is the right side with left-to-right scripts and the left side with right-to-left scripts

The values and are relatively new. They are called logical values. We should favor using these now. The browser support is good, and these logical values create more inclusive designs.

Logical values enable us to create the correct layout for languages with different writing directions with a single value. The most commonly used logical values are and . The examples that follow feature less commonly used logical values to illustrate how these can be used in different use cases.

Let’s implement the example from earlier. Let’s create a simple that has an image that is floated to the start of the second paragraph.

<article>
      <h1>England youngsters reaping the rewards of a pathway at Under-19 Euros</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
        voluptatem incidunt voluptas nobis placeat facilis commodi laboriosam
        similique id veritatis molestias, dignissimos praesentium, autem tenetur
        consequatur beatae itaque. Ipsa, iure.
      </p>
      <img src="img/players.jpg" alt="generic photo of men playing football" />
      <p>
        Mollitia delectus sit expedita nobis, nostrum est porro soluta earum
        accusamus! Architecto quae quas aliquid voluptatum rem alias voluptate
        quo quidem, delectus adipisci ipsum sunt maxime officia esse magni
        inventore?
      </p>
      <!--more paragraphs -->
</article>

We just need to add the following style to the :

img {
    float: inline-start;
}

By default, there is no space between the image and the text. You’ll probably want to add a margin to provide a clear separation between the image and text. I added .

See the Pen
`float: inline-start;` article (english) by rob2 (@robatronbobby)
on CodePen.

If we used the exact same CSS but with Arabic content in our HTML document, it will be aligned to the right instead of the left:

See the Pen
`float: inline-start;` article (arabic) by rob2 (@robatronbobby)
on CodePen.

Fairly simple, right?

The common uses of should truly be this simple. However, there are some quirks associated with using that you may encounter in different scenarios. By deepening our understanding of this property, we can prevent confusing outcomes!

Создание плавающих контейнеров при помощи float

Изначально элементы веб-страницы располагаются на ней друг за другом, в том порядке, в котором определены в html-коде. Размещая в коде теги абзацев, заголовков, списков и др. на странице мы видим их в том же порядке. Но при помощи некоторых атрибутов css мы можем изменить этот порядок. Один из них float.

Правило float позволяет нам создавать так называемые плавающие элементы. То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки картинок на веб-страницу.

У этого правила может быть три возможных значения:

float: left|right|none|inherit

По умолчанию float использует значение none, то есть элементы не имеют никакого обтекания и идут по порядку друг за другом.

Значения left и right выравнивают элемент веб-страницы соответственно по левому и правому краю родительского элемента, а остальное содержимое будет обтекать его с противоположной стороны.

Рассмотрим два блочных элемента. Для начала просто подсветим их фоном различным цветом с помощью правила background:

<div style=»background:silver»>Содержимое первого блочного элемента</div>
<div style=»background:«>Содержимое второго блочного элемента</div>

Так они ведут себя в обычном случае:

А теперь для первого div-а давайте пропишем правило float со значением left, и зададим ему отступы с помощью свойства margin для наглядности его взаимодействия с соседним тегом:

<div style=»background:silver; float:left; margin:4px;»>Содержимое первого блочного элемента</div>
<div style=»background:«>Содержимое второго блочного элемента</div>

Как видим, первый div стал выравниваться по левому краю, а содержимое соседнего элемента сало обтекать его по правой стороне.

При применении правила float к строчным элементам, последние начинают вести себя как блочные при взаимодействии с другими элементами web-страниц. Так, например, в обычных ситуациях правила height и width для строчных элементов работать не будут. Но после применения атрибута float, параметры размеров сразу начинают иметь значения.

Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:

<span style=»background: #CEE2D3; width:200px; height:100px;float:left»>Содержимое строчного элемента span</span><div style=»background:silver; float:left; margin:4px;»>Содержимое первого блочного элемента</div>
<div style=»background:«>Содержимое второго блочного элемента</div>

На рисунке видно, что правила width и height для span-а не сработали и его размеры стали равны в соответствии с его содержимым.

Теперь добавим элементу span правило float со значением left:

<span style=»background: #CEE2D3; width:200px; height:100px;float:left»>Содержимое строчного элемента span</span>
<div style=»background:silver;»>Содержимое первого блочного элемента</div>
<div style=»background: #fd0″>Содержимое второго блочного элемента</div>

Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам. Причем не зависимо от того к какому элементу применяется правило, он становится блочным.

А что если задать одинаковое значение атрибута стиля float для нескольких следующих друг за другом элементов? Давайте посмотрим:

<span style=»background: #CEE2D3; width:100px; float:left»>Содержимое строчного элемента span</span>
<div style=»background:silver; width:100px; float:left»>Содержимое первого блочного элемента</div>
<div style=»background: #fd0; width:100px; float:left»>Содержимое второго блочного элемента</div>

Они выстроятся по горизонтали друг за другом в том порядке, в котором они прописаны в html-коде, и будут выровнены по указанному краю родительского элемента.

Остается заметить, что правило float применяется при блочной верстке, основанной на плавающих контейнерах. При применении такого дизайна часто приходится помещать какие-либо элементы ниже тех, что были выровнены по левому или правому краю. Если просто убрать у них правило стиля float или задать для него значение none, результат будет непредсказуемым. В этом случае на помощь приходит правило clear.

Верстаем дивами на практике — создаем макет сайта

Более того, для всех этих манипуляций вам даже не нужен свой сервер и хостинг — все можно сделать на домашнем ПК, понадобится только текстовый редактор и браузер. Я пользуюсь редакторами Notepad++, Brackets и Sublime — по настроению и в зависимости от задач.

Для начала создайте пустую папку и положите в нее два пустых файла, как я уже говорил это index.html и style.css. Нам нужно написать обязательные для любого HTML документа элементы, подключить файл стилей и сделать блочную верстку. Я подготовил код для вашего index.html файла, не стал прописывать теги <description> и <title>, а лишь ограничился базовым необходимым кодом, вот он:

<html><head><meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ ><title>Blogwork.ru — блочная верстка<title><link rel=»stylesheet» type=»text/css» href=»style.css» ><head><body>
<div id=»container»>
<div id=»header»>
<h2>Шапка сайта<h2>
<div>

<div id=»navigation»>
<h2>Навигация по сайту<h2>
<div>

<div id=»menu»>
<h2>Меню сайта<h2>
<div>

<div id=»content»>
<h2>Основной контент<h2>
<frameset rows=»10%, 80%, 10%» >
<frame src=»1.html»>
<frameset>
<div>

<div id=»clear»><div>

<div id=»footer»>
<h2>Футер сайта<h2>
<div><div>
<body><html>

Результат:

Для того чтобы увидеть такой же пример, откройте в браузере файл index или перетащите его на панель с другими вкладками (не закладками). Возвращаясь к коду — как видим, блоки идут по порядку друг за другом и у них нет оформления потому что мы не заполнили файл style.css. Пример кода:

body {
background #f5f5f5;
color #000000;
font-family Arial, Times New Roman;
font-size 16px;}
#container {
background#99CC00;
margin 40px auto;
width 1000px;
height 600px;}
#header {
background green;
height 100px;
width 1000px;}
#navigation {
background white;
width 1000px;}

#menu {
background #99CC00;
float left;
width 300px;
height 400px;}

#content {
background #d3d3d3;
float right;

width 700px;
height 400px;}
#clear {
clearboth;}
#footer {
background red;
height 80px;
width 1000px;}

Результат:

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

При этом, файлы в папке выглядят так:

Итак, у нас получился самый простой макет сайта. Он сверстан на дивах (имеет блочную верстку) и состоит из двух колонок и следующих блоков (контейнеров): шапка, навигация, меню, контент и футер. Каждому блоку присвоен соответствующий id: header, navigation, menu, content, footer — именно к этим уникальным id «цепляются» (прописываются) стили и свойства в файле style.css.

Надеюсь мой пример получился хорошим наглядным пособием того, как на практике осуществляется блочная верстка. Кстати, я подготовил для вас архив с файлами index и style, которые содержат вышеобозначенный код. Скачать здесь:

Настоящая верстка конечно же намного сложнее — там используются и фоновые изображения, и отступы, и много чего еще. Есть даже специальные техники для того, чтобы оптимизировать отображение макета сайта в различных браузерах.

3 правила адаптивной верстки

Задавайте метатег viewport
```
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
```
, таблица возможных параметры мета-тега viewport:
CSS Media Queries: стили для мобильного устройства с разрешением указанным в свойствах @media
```
@media only screen
and (min-device-width 320px)
and (max-device-width 568px) {
    .header {
        background-color #257965;
    }
}
```

Задавайте свойства CSS в процентах, например:

.reviews {
    width 22%;
    font-size 140%;
    padding-top 2%;
    margin-top 2%;
    margin-bottom 4%;
}

Табличная верстка

Метод табличной верстки устарел. Основными причинами отхода от такого способа считается огромное количества кода, которое возникает вследствие описания каждой ячейки отдельными тегами. Также стоить заметить, что каждая ячейка обладает стенками, которые необходимо также описать. Код обычной веб-страницы, которая верставется табличным способом, больше в 4-5 раз кода страницы, которая создается блочным методом.

Блочная верстка

Блочная верстка или верстка с помощью слоев.

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

Характерным для блочной верстки является то, что блоки, как правило, должны располагаться по очереди — один за другим и четко разделяться между собой. Расположение в одной строке возможно, но оно используется только в некоторых случаях, когда возникает потребность добиться особого эффекта.

Под понятием блок(слой) в общем случае имеют в виду элементарную прямоугольную область(тег div), к которому применяется стилевое оформление. Для указания атрибутов этой области существует ряд качеств, среди которых выделяют рамку (border), поля (контуры) (margin) и отступы (padding). Наполнением блока может служить любая информация – изображение, текстовый фрагмент или что-либо другое.

Как работает float [#float-algorithm]

Синтаксис:

float left | right | none | inherit;

При применении этого свойства происходит следующее:

Элемент позиционируется как обычно, а затем вынимается из ~~документа~~ потока и сдвигается влево (для ) или вправо (для ) до того как коснётся либо границы родителя, либо другого элемента с .
Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
Другие непозиционированные блочные элементы без ведут себя так, как будто элемента с нет, так как он убран из потока.
Строки (inline-элементы), напротив, «знают» о и обтекают элемент по сторонам.

Ещё детали:

Элемент при наличии получает .

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

Это пока только теория. Далее мы рассмотрим происходящее на примере.

Текст с картинками

Одно из первых применений , для которого это свойство когда-то было придумано — это вёрстка текста с картинками, отжатыми влево или вправо.

Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство :

Её HTML-код выглядит примерно так:

<img src="1.jpg" style="float:right">
<p>Текст...</p>
<p>Текст...</p>

<img src="2.jpg" style="float:left">
<p>Текст...</p>

<img src="3.jpg" style="float:right">
<p>Текст...</p>

Каждая картинка, у которой есть , обрабатывается в точности , указанному выше.

Посмотрим, например, как выглядело бы начало текста без float:

Элемент вынимается из ~~документа~~ потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):

Элемент сдвигается максимально вправо(при ):

Строки, в отличие от блочных элементов, «чувствуют» и уступают ему место, обтекая картинку слева:

При — всё то же самое, только смещается влево (или не смещается, если он и так у левого края), а строки — обтекают справа

Строки и инлайн-элементы смещаются, чтобы уступить место . Обычные блоки — ведут себя так, как будто элемента нет.

Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:

Как видно из рисунка, параграфы проходят «за» . При этом строки в них о знают и обтекают их, поэтому соответствующая часть параграфа пуста.

Блок с float

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

Посмотрим, как это работает, на конкретной задаче — сделать рамку с названием вокруг картинки с Винни.

HTML будет такой:

<h2>Винни-Пух</h2>

*!*
<div class="left-picture">
  <img src="winnie-mult.jpg" width="200" height="150">
  <div>Кадр из советского мультфильма</div>
</div>
*/!*

<p>Текст...</p>

..То есть, включает в себя картинку и заголовок к ней. Добавим стиль с :

.left-picture {
*!*
  float left;
*!*

  /* рамочка и отступ для красоты (не обязательно) */
  margin 0 10px 5px 0;
  text-align center;
  border 1px solid black;
}

Результат:

Заметим, что блок «обернул» картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с определяется по содержимому.

Пример 2

последнее, но не менее важное, тег будет отображаться после плавающих элементов, как я использовал класс перед объявлением моего Теги, что гарантирует, что все плавающие элементы (слева/справа) очищаются до этой точки

Clearfix

приходя к clearfix, который связан с поплавками. Как уже указано @Elky, то, как мы очищаем эти поплавки, не является чистым способом сделать это, поскольку мы используем пустой элемент, который является не элемент предназначен для. Следовательно, здесь идет clearfix.

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

чтобы самостоятельно очистить любой элемент обертки, имеющий плавающие элементы, мы можем использовать

Примечание псевдо-элемент, используемый мной для этого . Это создаст виртуальный элемент для элемента-оболочки непосредственно перед тем, как он закроется. Если мы посмотрим в dom, вы увидите, как это проявляется в Дерево документа.

так что, если вы видите, он отображается после плавающего ребенка где мы очищаем поплавки, которые не что иное, как эквивалент пустой элемент свойство, которое мы используем для этого тоже. Теперь почему?—48—> и из этой области ответов, но вы можете узнать больше о псевдо элемент здесь.

обратите внимание, что это также будет работать в IE8, как ИЕ8 поддерживает псевдо. большинство разработчиков плавают свой контент влево или вправо на своих страницах, вероятно, divs держит логотип, боковую панель, контент и т

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

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

Метод 1: floats (плавающие элементы)

Пример 2

Пример 4

Преимущества

Недостатки

Рекомендации

CSS Float Examples

How do you float an image in CSS?

How do you float other HTML elements in CSS?

How do you float multiple elements in CSS?

Разбираем абсолютное позиционирование

Пример 2

Clearfix

Using float correctly

Создание плавающих контейнеров при помощи float

Верстаем дивами на практике — создаем макет сайта

3 правила адаптивной верстки

Табличная верстка

Блочная верстка

Как работает float [#float-algorithm]

Текст с картинками

Блок с float

Пример 2

Clearfix