Как убрать обтекание текстом картинки? Запрет обтекания тремя способами на CSS Проблемы с float.

В данном уроке мы расскажем о весьма важной теме, а именно о потоке HTML-документа, а также о способах управления им с помощью CSS-свойств float и clear.

Последовательность отображения элементов HTML

По умолчанию HTML-документ формируется сверху вниз, от верхнего края окна браузера по направлению к нижнему краю. Такова и очередность появления элементов веб-страницы. Порядок вывода называется потоком документа.

На скриншоте ниже - пример стандартного порядка вывода элементов:

В CSS существует несколько инструментов для управления этим потоком. Например, вы можете задавать обтекание элементов, а также вытаскивать их из общего потока. Об одном из этих инструментов - свойстве float - пойдет речь далее.

CSS float

Элемент, к которому применено свойство float, прижимается к левому или к правому краю родительского элемента (в зависимости от заданного значения), а все элементы, которые расположены ниже, поднимаются и словно обтекают данный элемент. Для лучшего понимания представьте себе камень, который обтекает вода. Собственно, именно поэтому такие элементы еще называют «плавающими».

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

Давайте рассмотрим значения, которые может принимать свойство float. Их всего три:

• left - элемент выравнивается по левой стороне. Элементы, находящиеся ниже в потоке, обтекают его с правой стороны.
• right - значение, противоположное предыдущему. Элемент выравнивается по правой стороне, а элементы, находящиеся ниже в потоке, обтекают его слева по левому краю.
• none - элемент не обтекается и находится в своей обычной позиции.

Как уже упоминалось, элемент со свойством float прижимается к левой либо правой стороне родительского элемента. Это может быть как основной контейнер веб-страницы, так и небольшой блок, скажем, сайдбар.

Применять данное свойство можно как к строчным, так и к блочным элементам. Но поскольку блочный элемент по умолчанию занимает всю ширину контейнера, то при использовании float с блоком рекомендуется задать ему ширину width и таким образом оставить место для содержимого, которое должно обходить элемент. Иными словами, необходимо дать воде возможность обтекать камень, и не перекрывать поток.

Ниже показан наглядный пример работы свойства float со значениями left и right:

Как видите, CSS позволяет легко и быстро создать макет из нескольких колонок, используя всего лишь два свойства в паре - float и width . А задать обтекание картинки текстом еще легче - мы просто применили к ней свойство float:right .

Отмена обтекания: свойство clear

В верстке практически всегда существует необходимость сбросить обтекание после определенного элемента. Например, в случае, когда основной блок веб-страницы обтекается боковой колонкой (сайдбаром), скорее всего, нам понадобится отменить обтекание после сайдбара. Ведь это определенно не последний элемент на странице, и, как минимум, есть еще футер - нижняя часть страницы, «подвал», который должен располагаться внизу, никуда не съезжать и ничего не обтекать.

Сейчас на скриншоте обтекание после сайдбара не отменено, и блок-футер ведет себя странным образом, пытаясь обтекать элемент выше (но ничего не выходит, поскольку ширина как минимум одного элемента этого сделать не позволяет - элемент «застряет»):

Как сделать сброс обтекания? В этом нам поможет свойство clear и его значения:

• left - элемент, к которому применяется свойство clear:left, перестает обтекать элемент со свойством float:left, однако правое обтекание сохраняется.
• right - элемент, к которому применяется свойство clear:right, перестает обтекать элемент со свойством float:right, однако левое обтекание сохраняется.
• both - полностью отменяет обтекание со всех сторон. Элемент смещается вниз и образовывает стандартный поток. На следующие за ним элементы обтекание также перестает влиять.
• none - отменяет очистку clear. Элемент будет вести себя, как обычно, и на него будут влиять настройки float.

Воспользуемся полученными знаниями и зададим нашему футеру свойство clear:both:

В итоге футер выровнялся и разместился на своем месте. Кстати, также стал виден результат работы свойства margin-bottom:10px , которое было ранее применено к сайдбару.

Поддержка браузерами

Свойства float и clear поддерживаются всеми использующимися браузерами, включая IE6 и IE7.

Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель – предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.

Постановка задачи

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

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

Правильное решение

Для реализации поставленной задачи создаем два блока: один для картинки, второй – для текста. С учетом того, что под картинкой может располагаться еще какие-либо элементы, для картинки мы создаем отдельный контейнер, в противном случае этого не требуется, можно просто присвоить тегу с изображением необходимый класс.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" > Текстовый блок

Display: inline; }

Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:

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

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

Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left . Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!

А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока – необходимо обратиться к свойству overflow со значением hidden . Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).

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

Image { float: left; /*обтекание */ margin: 10px; /*внешний отступ для красоты */ display: inline; /* для IE6, чтоб отступ слева не удвоился */ } . text{ overflow: hidden; float: left; }

Недостатки метода и альтернатива

Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden , есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.

В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell; . Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower

Img { float: left; /* задаем обтекание */ margin: 10px; /* отступ для красоты */ display: inline; /* для IE6, чтоб отступ слева не удвоился */ } . text{ display: table- cell; zoom: 1 ; /* Осторожно! Строка невалидна */ }

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

В каких браузерах работает?

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

К примеру, пришлось по работе скопи-пастить визуальный вид одной промо-странички. И понадобилось отключить обтекание текста для некоторых картинок. С таблицами возиться неохота - там было много картинок, пришлось искать решение через CSS.

И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) - вот готовое решение.

как с помощью CSS отключить обтекание картинок текстом

Если мы просто возьмем, да и пропишем у тега с картинкой атрибут align="left" (выравнивание по левому краю), то нас ждет разочарование (как на верхнем примере на картинке). Текст, дойдя до края картинки, начнет ее обтекать (или "обволакивать", если по другому выразиться).

Но если для картинки прописать стиль style="float: left" (т.е., тег картинки будет выглядеть как ); а затем для текста, который рядом с картинкой (для параграфа) укажем стиль style="overflow:hidden;" (

) - то текст картинку обтекать не будет.

Вот как все выглядит на практике:

P.S. После того, как Вы отключите обтекание, то увидите, что текст прижимается прямо к картинке. Что, конечно же, не есть хорошо. Поправить это довольно просто - надо для текста (для параграфа) дописать стиль padding-left:10px; - ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.

Последнее обновление: 21.04.2016

Как правило, все блоки и элементы на веб-странице в браузере появляются в том порядке, в каком они определены в коде html. Однако CSS предоставляет специальное свойство float , которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

right: элемент перемещается вправо

none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

Л. Толстой. Война и мир. Том второй. Часть третья

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

«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...

В данном случае мы получим последовательное размещение элементов на странице:

Теперь на той же странице применим свойство float , изменив стили следующим образом:

Image { float:left; /* обтекание слева */ margin:10px; margin-top:0px; } .sidebar{ border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin-left:10px; font-size: 20px; float: right; /* обтекание справа */ }

Соответственно изменится и размещение элементов на странице:

Элементы, к которым применяется свойство float , еще называют floating elements или плавающими элементами.

Запрет обтекания. Свойство clear

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

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

Свойство clear может принимать следующие значения:

left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, пусть на веб-странице будет определен футер:

Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:

Изменим стиль футера:

Footer{ border-top: 1px solid #ccc; clear: both; }

Теперь футер не будет обтекать изображение, а будет уходить вниз.

Float - это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст "обтекал" их. Обычно это так и называется: "обтекание текстом".

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

В веб-дизайне, элементы страницы с установленным свойством float , ведут себя точно также как и изображения в полиграфии, когда текст "обтекает" их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.

Установка свойства float происходит следующим образом:

#sidebar { float: right; }

Всего есть 4 значения для свойства float . Left и right используются для соответствующих направлений. None (по умолчанию) - обеспечивает, что элемент не будет "плавать". И inherit , которое говорит, что поведение должно быть такое же, как и у родительского элемента.

Для чего можно использовать float?

Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.

Свойство float также полезно и в меньших масштабах. Для примера рассмотрим маленькую область на странице сайта. Допустим вы используете float для аватара, при изменении размера изображения, размер текста будет подогнан в соответствии с изображением.

Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением - абсолютное (absolute). В этом случае аватар не повлияет на положение текста.

Отмена свойства float

Для float , родственное свойство - clear . Любой элемент, у которого установлено свойство clear , не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.

В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float . Чтобы исправить ситуацию, ему необходимо установить свойство clear , которое гарантирует, что элемент выведется ниже float-элементов.

#footer { clear: both; }

Свойство clear может принимать четыре значения. Both , наиболее используемое, применяется для отмены float каждого из направлений. Left и Right - используются для отмены float одного из направлений. None - по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear . Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float , встречается гораздо реже, но, безусловно, имеет свои цели.

Большой коллапс

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

Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:

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

Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить трудности в вёрстке. Для того чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-элементов, но до закрытия родительского элемента.

Способы отмены float

Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both; , как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.

• Метод пустого div -а. Используется, в буквальном смысле, пустой div .
  . Иногда на его месте может использоваться элемент
  или какой-нибудь другой, но div используется чаще всего, потому что по умолчанию у него нет никакого стиля, нет особого назначения и вряд ли к нему применён общий стиль через CSS. Этот метод может не нравится любителям семантически чистой разметки, поскольку присутствие пустого div -а не имеет контекстного значения и размещён на странице только из соображений дизайна. Конечно, строго говоря, они правы, но он делает свою работу и никому не вредит.
• Метод overflow . Основан на том, что родительскому элементу необходимо установить свойство overflow . Если значение этого свойства установлено в auto или hidden , то родительский элемент увеличится, чтобы вместить в себя все float-элементы. Этот метод выглядит более семантически правильным, поскольку не требует дополнительных элементов. Однако, если вы соберётесь использовать ещё один div , только для того чтобы использовать этот подход (имеется в виду родительский div), то это будет то же самое, что предыдущий пример с добавлением пустого div -а. Кроме того, помните, что свойство overflow предназначено для других целей. Будьте аккуратны и не допустите, что часть контента у вас пропадёт, либо появятся никому не нужные скролл-бары.
• Метод простой очистки. Этот метод использует замечательный псевдо селектор CSS - :after. Гораздо лучше чем использование overflow для родительского элемента. Вы просто устанавливаете ему дополнительный класс, объявленный, например, так: .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } Этот способ добавляет незаметное для глаз содержимое и отменяет float . И, кстати, это не вся история о том как дополнительный код должен быть использован в старых браузерах.

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

Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или "метод простой очистки", если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div -а между каждой из групп. Три элемента-контейнера, или три пустых div -а, что лучше для вашей задачи - решать вам.

Проблемы с float

Float часто стараются обходить, поскольку работать с ними надо очень аккуратно. Большинство ошибок пришло вместе с IE6. Поскольку всё больше и больше веб-дизайнеров отказываются от поддержки IE6, то вас могут и не волновать эти проблемы. Но для тех, кому не всё равно, вот краткий список.

Альтернативы float

Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module) , который в будущем предоставит достойную альтернативу float.