Сетки / float и выпадание из потока [10/32]
×
Курс «Сетки»

float и выпадание из потока [10/32]

Про выпадание элементов из потока при абсолютном и фиксированном позиционировании мы поговорим в курсе «Позиционирование». А сейчас рассмотрим выпадание при флоатах.

Зафлоаченные элементы выпадают из потока, но лишь частично:

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

Ещё раз: для блочных элементов флоатные не существуют, но текст внутри блоков флоатные обтекает.

Такое поведение флоатов даёт интересные эффекты:

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>float и выпадание из потока</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"> <h1>Прохождение сквозь блоки</h1> <div class="block block1"> .block1 </div> <p>Следующие за float'ным <em>блочные</em> боксы подтягиваются вверх и занимают его место, как если бы float'нутого бокса в потоке не было.</p> <p><em>Строчные</em> же боксы внутри подвинувшихся наверх блоков начинают обтекать float'нутый бокс со свободной стороны.</p> <h1>Выпадание из родителя</h1> <div class="columns-container"> <div class="block block2"> .block2<br> Первая колонка </div> <div class="block block3"> .block3 Вторая колонка </div> </div> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; } h1 { margin-top: 0; font-size: 20px; } p { background: #ecf0f1; border: 2px dotted #bdc3c7; } .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 2px #cccccc; } .columns-container { padding: 10px; background: #27ae60; border: 2px solid #34495e; } .block { width: 100px; margin-bottom: 10px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; }
HTML Academy
  1. .block1 задайте флоат влево, маргин справа 10px.
  2. А затем .block1 задайте высоту 100px.
  3. .block2 задайте флоат влево.
  4. .block3 задайте флоат вправо.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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