Сетки / Погружение в флоаты [8/32]
×
Курс «Сетки»

Погружение в флоаты [8/32]

А теперь детально разберём свойство float, его значения, особенности поведения и способы применения.

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

Изначально float было предназначено для того, чтобы включать обтекание элементов текстом. Наподобие того, как в более старой версии HTML текст обтекал изображения c атрибутами align="left" или align="right".

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

Свойство float имеет следующие значения:

  1. left — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
  2. right — прижимает элемент к правому краю родителя, другие элементы обтекают его слева;
  3. none — отключает режим обтекания и возвращает элементу нормальное поведение.

Обратите внимание, что зафлоатить элемент по центру нельзя.

Иллюстрация в задании взята из статьи «Раскладка в CSS: float».


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Погружение в флоаты</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="block block1">.block1</div> <p>Как и позиционирование, float используется для того, чтобы двигать боксы.</p> <div class="block block2">.block2</div> <p>Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.</p> <p><img src="/assets/course65/float-behavior.png" width="100" alt=""> При этом сам бокс и следующие за ним в потоке приобретают интересное поведение: float'нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.</p> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; } .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 2px #cccccc; } .block { width: 80px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; } p { background: #ecf0f1; border: 2px dotted #bdc3c7; }
HTML Academy
  1. .block1 и изображению задайте флоат влево.
  2. .block2 задайте флоат вправо.
  3. Чтобы текст не прилипал, задайте маргин справа 10px изображению и .block1, маргин слева 10px для .block2.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.