Обтекание одного блока другим CSS

Задача

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

Решение с помощью float

HTML

<div class="left_div1"> </div> <div class="rigth_div1"> </div>

CSS

Самое важное - это указать у левого блока свойство float:left

Для наглядности я задам свойство background:lightblue; чтобы фон стал светло-синим

А правому блоку зададим светло-зелёный цвет.

.left_div1 { float:left; width:40%; background:lightblue; } .right_div1 {background:lightgreen;}

Результат

Результата мы добились но блоки пока слишком близко друг к другу

Добавим внутренних и внешних отступов.

HTML

<div class="left_div2">
</div>
<div class="rigth_div2">
</div>

CSS

.left_div2
{
float:left;
width:40%;
background:lightblue;
margin-right:15px;
padding:10px;
}

.right_div2
{
padding:10px;
background:lightgreen;
}

Практический пример

Предположим я хочу прорекламировать новую карту Альфа-Банка - Альфа Travel.

Для этого я планирую разместить изображение с картой в левый блок а текст с описанием - в правый.

Напокупал? Напутешествуй!

Оплачивай билеты картой Alfa Travel и получай мили на следующие путешествия.

Лучшая карта для любителей путешествий

Alfa Travel Premium
Alfa Travel

11%
0%
Вернём за покупки
до 11% милямиБесплатное снятие наличных по всему миру
7%

0₽
до 7% на остаток по счетуБесплатное
годовое обслуживание

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

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

HTML

<div class="left_div3"> </div> <div class="rigth_div3"> </div>

CSS

.left_div3 { float:left; width:40%; margin-right:15px; padding:10px;} .right_div3 {padding:10px;}

Результат

Напокупал? Напутешествуй!

Оплачивай билеты картой Alfa Travel и получай мили на следующие путешествия.

Лучшая карта для любителей путешествий

Alfa Travel Premium
Alfa Travel

11%
0%
Вернём за покупки
до 11% милямиБесплатное снятие наличных по всему миру
7%

0₽
до 7% на остаток по счетуБесплатное
годовое обслуживание

Остановить обтекание

Достаточно там, где Вы хотите остановить обтекание разместить элемент, например div или br и присвоить ему класс, который содержит в себе clear:both

Например:

HTML

<div class="clearBoth"></div>

CSS

.clearBoth { clear: both; }

CSS Grid

Более продвинутый вариант - это использование CSS Grid - решетки на которой можно разместить любое количество блоков.

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

.gridBox > div { padding: .1rem; } .gridBox { display: grid; grid-template-columns: repeat(1fr, 2fr); grid-gap: 3px; grid-auto-rows: minmax(100px, auto) } .gridBox--one, .gridBox--three { max-width:260px;} .gridBox--one { grid-column: 1; grid-row: 1; } .gridBox--two { min-width:320px; max-width:800px; grid-column: 2; grid-row: 1/3; } .gridBox--three { grid-column: 1; grid-row: 2; } @media screen and (max-width: 735px) { .gridBox{width:100%} .gridBox > div { border: 0; border-color: #502542;; border-color: rgba(80, 37, 70, 0.3); border-radius: 0; padding: 0;} .gridBox--one, .gridBox--three { min-width:180px; max-width:100%;} .gridBox--one { grid-column: 1 ; grid-row: 1; } .gridBox--two { min-width:180px; width:100%; grid-column: 1; grid-row: 2; } .gridBox--three { grid-column: 1; grid-row: 3; } } @media screen and (min-width: 1840px) { .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:left;} .tOfContents td {font-size:1.4rem;} .tOfContents td a {padding:1.2rem;} } @media screen and (max-width: 1840px) and (min-width: 1200px) { .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:left;} .tOfContents td {font-size:1.4rem;} .tOfContents td a {padding:1.2rem;} } @media screen and (max-width: 1199px) and (min-width: 1000px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;} } @media screen and (max-width: 1000px) and (min-width: 800px) { .tOfContents td a {padding:1rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;} } @media screen and (max-width: 800px) and (min-width: 600px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 600px) and (min-width: 360px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 360px) and (min-width: 310px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 310px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} }

HTML

<div class="width100 m-top3rem"> <div class="gridBox"> <div class="gridBox--one"> 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div> <div class="gridBox--two"> 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </div> <div class="gridBox--three"> 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 </div> </div> </div>

Результат

Чтобы понять как работает наша решётка - измените разрешение экрана, например, сжав окно браузера, или откройте на мобильном устройстве.

Если остались вопросы - смело задавайте их в комментариях либо воспользуйтесь поиском по сайту