тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Действие флоатов на родителя

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

Давайте посмотрим, как это будет выглядеть в браузере:

<div> <img src="img.png" alt=""> </div> div { border: 1px solid red; }

:

Теперь давайте установим картинке свойство float в значении left. В этом случае произойдет удивительная вещь - высота родителя исчезнет, его нижняя граница будет начинаться сразу после верхней, а картинка вылезет снизу за своего родителя:

<div> <img src="img.png" alt=""> </div> div { border: 1px solid red; } img { float: left; }

:

Получается, что элементы, которым задано свойство float, не расширяют своего родителя по высоте.

Давайте свойству float вместо left напишем значение right. Поведение родителя не изменится, но картинка начнет плавать справа:

<div> <img src="img.png" alt=""> </div> div { border: 1px solid red; } img { float: right; }

:

Зададим высоту

Хотя плавающие элементы не расширяют своего родителя по высоте, мы можем сами задать ему высоту с помощью свойства height. Сделаем это:

<div> <img src="img.png" alt=""> </div> div { height: 100px; border: 1px solid red; } img { float: right; }

:

С текстом

Давайте уберем свойство height для дива и поставим небольшой текст перед картинкой.

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

<div> text <img src="img.png" alt=""> </div> div { border: 1px solid red; } img { float: right; }

:

Давайте поставим текст после картинки - результат не изменится:

<div> <img src="img.png" alt=""> text </div> div { border: 1px solid red; } img { float: right; }

:

Давайте сделаем так, чтобы картинка плавала по левому краю - результат будет аналогичным:

<div> <img src="img.png" alt=""> text </div> div { border: 1px solid red; } img { float: left; }

:

Давайте снизу добавим еще один див - картинка налезет и на него:

<div> <img src="img.png" alt=""> text </div> <div> text </div> div { border: 1px solid red; } img { float: left; }

:

Если же в первый див добавить настолько много текста, что по высоте он будет больше картинки - она не будет налезать на второй див:

<div> <img src="img.png" alt=""> длинный текст </div> <div> text </div> div { text-align: justify; border: 1px solid red; } img { float: left; }

:

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