Сетки / float и ширина [9/32]
×
Курс «Сетки»

float и ширина [9/32]

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

Если мы задаём элементу свойство float:left или float:right, то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.

Зафлоаченному элементу можно явно задавать размеры и отступы.

Есть тонкость, связанная со строчными элементами. Если зафлоатить строчный элемент, то он начинает вести себя как блочный, а именно: воспринимать размеры и отступы.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.
Выполнить задание
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"> <div class="block block1"> .block1<br> Короткий текст </div> <p>Float'нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.</p> <div class="block block2"> .block2<br> Более длинный текст, занимающий всю ширину страницы </div> <p>Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float'нутого бокса в потоке не было. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать 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 { padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; } p { background: #ecf0f1; border: 2px dotted #bdc3c7; }
HTML Academy
  1. Для .block1 задайте флоат влево.
  2. Для .block2 задайте флоат вправо.
  3. Обоим блокам задайте ширину 100px.
Теория Проверить Следующее задание

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

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

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

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

В f T © ООО «Интерактивные обучающие технологии», 2013−2017

Курсы

Программа обучения
Все курсы
HTML Шорты
Подписка

Интенсивы

Все интенсивы
Получить профессию
База выпускников
Для компаний

Информация

Об Академии
Для наставников
Для школ

Остальное

Написать нам
Блог