Действие флоатов на родителя в CSS
Пусть теперь у нас есть див, в котором лежит
картинка. Диву зададим границу, а картинке
пока не будем задавать свойство 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;
}
: