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

В резиновых макетах, однако, у вас нет такой гарантии. Если пользователь просматривает ваш сайт на маленьком устройстве, горизонтальное пространство, которое вы выделили для текста, может вмещать только одно-два слова на строку. Такая узкая колонка текста не просто выглядит уродливо, она еще и непрочная. Предложение, которое содержит длинное слово разорвётся, когда длинное слово перейдёт вниз под плавающую картинку. Оно оставит за ним пустое место.

 

Интуитивно кажется, что следующий CSS отвечает всем требованиям:

p {
  min-width: 10em;
  /* For demonstration */
  border: 1px solid red;
}

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

 

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

Это решение конечно же будет работать только в браузерах с поддрежкой CSS медиа запросов. Для остальных браузеров решение деградирует до изначальной проблемы.

@media screen and (max-width: 400px) {
  img {
    float: none;
  }
}

 

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

Это решение работает в большинстве браузеров. В старых браузерах решение деградирует до изначальной проблемы.

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  /* For Demonstration */
  border: 1px solid green;
}

Зелёная граница псевдо-элемента нужна для демонстрации работы. Это не требуется для решения и вы можете удалить этот участок у себя в коде. Тогда псевдо-элемент вообще не будет занимать вертикальное пространство.