базовый курс

ГРУППА КУРСА

Обтекание элементов

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

Обтекание устанавливается с помощью свойства float. Значения свойства:

float: left; - элемент смещается влево, другие элементы обтекают его справа

float: right; - элемент смещается вправо, другие элементы обтекают его слева

float: none; - отмена обтекания

float: inherit; - значение принимается от родительского элемента

Один из самых распространённых примеров использования свойства float - это обтекание картинки текстом. Выглядит это так:

обтекание элементов Взрослый лев имеет вес в среднем до 250 килограмм при длине туловища около 2,5 м. Гибкое, подвижное тело льва обладает отлично развитой мускулатурой шеи и передних лап. Когти льва достигают в длинну 7 см. Массивная голова льва с вытянутой мордой имеет сильные челюсти. У льва 30 зубов, клыки размером до 8 см позволяют ему охотиться на достаточно крупных животных: косуль, кабанов, зебр и антилоп.

Чтобы сделать такое обтекание, картинку нужно поместить в абзац или другой блок и установить ей свойство float.

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
img
  {
  float:left;
  }

HTML код:

14
15
16
17
18
19
20
21
22
<p style="width: 400px">
<img src="lev.jpg" width="170">
Взрослый лев имеет вес в среднем
до 250 килограмм при длине туловища около 2,5 м. Гибкое, подвижное
тело льва обладает отлично развитой мускулатурой шеи и передних лап. 
Когти льва достигают в длинну 7 см. Массивная голова льва с вытянутой
мордой имеет сильные челюсти. У льва 30 зубов, клыки размером до 
8 см позволяют ему охотиться на достаточно крупных животных: косуль,
кабанов, зебр и антилоп.</p>

Элементы со свойством float имеют ряд особенностей:

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

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

Стиль:

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#red 
  {
  float:left; 
  height: 80px; 
  width: 50px; 
  background-color: Red; 
  }
#gr
  {
  height: 50px;
  width: 70px;
  background-color: Green;
  }
#bl
  {
  height: 50px;
  width: 70px;
  background-color: Blue;
  }
#gray
  {
  height: 50px;
  width: 70px;
  background-color: Gray;
  }
#yel
  {
  height: 50px;
  width: 70px;
  background-color: Yellow;
  }

HTML код:

54
55
56
57
58
<div id="red"></div>
<div id="gr"></div>
<div id="bl"></div>
<div id="gray"></div>
<div id="yel"></div>

Если свойство float задано нескольким элементам подряд, то эти элементы располагаются в одну строку. Первый элемент смещается к краю страницы или блока, следующий элемент присоединяется к нему и все остальные выстраиваются друг за другом. Если элементы занимают всю ширину страницы или блока, то следующий элемент переносится на новую строку и остальные элементы располагаются в этой строке. Таким образом, элементы могут занять несколько строк. Чтобы посмотреть как это работает, добавим зелёному блоку свойство float:

20
float:left;

Теперь добавим это свойство ещё и синему блоку:

27
float:left;

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