Отмена обтекания с помощью свойства clear в CSS
Для решения такой проблемы существует специальное
свойство clear, которое отменяет обтекание.
Значение left отменяет обтекание слева,
значение right - справа, а значение
both - с обоих сторон. Это значение
и используется чаще всего.
Итак, свойство clear отменяет обтекание.
В нашем случае это позволит нам сделать так,
чтобы плавающая картинка из первого дива
не налазила на второй див.
При этом clear следует давать тому
элементу, на который не должны налазить плавающие
элементы, то есть в нашем случае его стоит
дать второму диву.
Давайте сделаем это - дадим второму диву
кроме класса parent еще и класс clearfix
и для этого нового класса зададим свойство
clear в значении both - налезание
картинки исчезнет:
<div class="parent">
<img src="img.png" alt="">
text
</div>
<div class="parent clearfix">
text
</div>
.parent {
border: 1px solid red;
}
.parent img {
float: left;
}
.clearfix {
clear: both;
}
:
Название clearfix является общепринятым,
поэтому в дальнейшем используйте именно его.