Курс «Сетки»

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

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

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

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

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

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

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

Выполнить задание

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

.block1 задайте флоат влево, маргин справа 10px.
А затем .block1 задайте высоту 100px.
.block2 задайте флоат влево.
.block3 задайте флоат вправо.

Теория Проверить Следующее задание

Идёт запись на курс Базовый HTML и CSS #18, который стартует 7 августа.

Курсы

Интенсивы

Информация

Остальное