Хотя проблема со всплытием возникает не только с изображениями, чаще всего она связана именно с ними, так что рассмотрим такую ситуацию. Обычно она возникает, когда несколько изображений всплывают на одной стороне веб-страницы довольно близко друг к другу. В нашем примере изображениям задан класс, который создает подобное расположение изображениям:

img.theremin {
        height: 370px;
        width: 300px;
        float: right;
        margin-left: 1em;
}

И следующая разметка:

<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Etherwave_Theremin_Kit.jpg/296px-Etherwave_Theremin_Kit.jpg" class="theremin" alt="Theremin">
Терменво́кс (theremin или thereminvox) — электромузыкальный инструмент, созданный в 1920 году российским изобретателем Львом Сергеевичем Терменом в Петрограде.
<p>Игра на терменвоксе заключается в изменении музыкантом расстояния между своими руками и антеннами инструмента. При этом изменяется ёмкость колебательного контура и, как следствие, — частота звука. Вертикальная прямая антенна отвечает за изменение тона звука, а горизонтальная подковообразная — за изменение громкости звука.
<p><img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Lev_Termen_playing_-_cropped.jpg" class="theremin" alt="Lev Termen playing">
Инструмент предназначен для исполнения любых (классических, эстрадных, джазовых) музыкальных произведений в профессиональной и самодеятельной музыкальной практике, а также для создания различных звуковых эффектов (пение птиц, свист и т. п.), которые могут найти применение при озвучивании фильмов, в театральных постановках, цирковых программах.

Результат будет выглядеть следующим образом:

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

Что же происходит? Все очень просто, CSS делает именно то, что в нем записано. Применения свойства всплытия со значением вправо означает, что элемент будет всплывать вправо от любого содержимого, которое расположено после него. Для первого изображения это содержимое включает второе изображение, расположенное ниже.

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

img.theremin {
        height: 370px;
        width: 300px;
        float: right;
        margin-left: 1em;
        clear: right;
}

И получим желаемый результат:

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

Свойство очистки обманчиво простое и может принимать пять следующих значений: left (слева), right (справа), both (оба), inherit (наследовать) и none (нигде). Оно фактически означает, что ничему не позволено всплывать в указанную сторону. В нашем примере изображения всплывают вправо, нам не нужно, чтобы что-нибудь было справа от этих изображений, и задание свойства всплытия со значением справа позаботится об этом.

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

img.theremin {
        height: 370px;
        width: 300px;
        float: right;
        clear: right;
        margin: 0 0 2em 1em;
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование контекстного селектора и селектора прямого потомка в CSS
• Использование возможностей встраивания видео с сайта YouTube
• Использование блочных и строчных элементов