Что такое обтекание в css

Понятие обтекания текста в html документе. Объяснение простыми словами с примерами и пояснениями для новичков

Доброго времени суток, читатели публикации! Все онлайн-ресурсы в своем арсенале используют мультимедийные файлы (изображения, видео и т.д.), которые делают сайт интереснее для пользователей и в некоторых случаях нагляднее презентуют информацию. Поэтому я расскажу вам как сделать обтекание текста html.

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

Что означает «обтекание» и для чего оно используется?

Для начала разберемся с самим термином «обтекание».

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

Я уверен, что каждый из вас видел, как какое-либо изображение находится внутри текстового контента или наоборот располагается сбоку от других объектов. Такой принцип размещения информации называется обтеканием.

Например, рисунок, который со всех сторон окружают предложения, говорят: «Изображение, обтекаемое текстом».

Разновидности обтекания текстом

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

Для того чтобы легко форматировать информационное наполнение веб-страниц, вам необходимо знать некоторые встроенные инструменты языков html и css.

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

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

Добавьте к текущему объявлению тега атрибуты align=»right» vspace=»0″ hspace=»10″.

У вас должна сформироваться вот такая строка:

Следующим механизмом перемещения картинки по странице и установки способа обтекания контентом является свойство float. С его помощью изображение можно двигать по горизонтали (right и left) или задавать значения объекта-предка (inherit).

Чтобы опробовать float на практике, необходимо вернуть объявлению тега первозданный вид () и после элемента вставить код:

Здесь расположен текст о милейшем создании – тигренке, который изначально по размерам напоминает домашних котов. Однако со временем он достигает почти 300 килограмм.

Источник

CSS: Обтекание элементов

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

Плавающие элементы

Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:

Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).

Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.

Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он «плавает» на странице.

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

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

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

Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.

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

Отмена обтекания

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

Для CSS свойства clear можно установить одно из значений:

Источник

Типичный верстальщик

Магия CSS: Обтекание текста вокруг нестандартных форм

Всем привет, меня зовут Анна Блок, я запускаю серию уроков посвященную CSS. Это скорее продвинутый уровень, когда ты уже что-то знаешь о нем. Однако, поверь, в CSS есть еще много интересного и, возможно, в этой серии уроков ты узнаешь что-то новое и захочешь применить в своей работе.
Назовем эту рубрику «Магия CSS». Думаю, это точно описывает то, о чем я буду рассказывать. Освоив эту магию тебя уже не будут пугать макеты дизайнеров, которые решили поддаться своей фантазии, ты сможешь воплотить все что угодно. Эта статья будет посвящена тому, как создать нестандартное обтекание текста. Узнаешь о некоторых свойствах CSS, которые наверняка редко используешь в работе.
Если ты хоть немного прокачан в CSS, то я более чем уверена, что ты знаешь, как решить эти задачи. Например, как сделать обтекание текста вокруг прямоугольной картинки.

Подсказка: безусловно, здесь можно использовать Flexbox или Grid CSS.
Ну и конечно же, наверняка, большинство из вас знают как сделать так, что бы текст продолжался в три колонки, либо на большее их количество.

Задача 1

Первый пример будет посвящен тому, что мы создадим вот такое нестандартное решение.

Этот пример нестандартен тем, что мы создаем некую картинку, которая имеет форму отличную от квадрата и прямоугольника (это то, к чему мы привыкли). Безусловно, здесь не подходит метод, как если бы мы сохранили картинку при помощи png. Я думаю, что многие понимают, что если вы сделаете так, то этот текст не станет по краю, где обрезается эта картинка. Наша же цель, сделать такое обтекание текста, для нестандартной формы.

center — устанавливаем изображение по центру;
top — устанавливаем изображение сверху по оси Y;
no-repeat — без повтора.

Растягиваем изображение по всему контейнеру:

Теперь давайте используем свойство к которому мы все привыкли:

Ознакомиться подробнее с HTML и CSS можно тут:

Задача 2

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

Задаем размеры изображению:

Ознакомиться подробнее с HTML и CSS можно тут:

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

Задача 3

Теперь давай поговорим о том, как сделать вот такой пример:

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

Зададим стили для svg:

Делаем заливку тегу circle :

Добавляем высоту, ширину и внутренние отступы для класса shape :

И теперь поработаем над shape shape-left :

По тому же принципу прописываем стили для shape shape-right

Дело осталось за малым, нам нужно еще немножко поработать над текстом. Используем класс text :

Осталось стилизовать теги h1 и p :

Вот таким методом мы смогли сделать так, что бы в нашем круге оказался текст.
Что было сделано:
Мы создали некую фигуру при помощи HTML-тегов, в данном случае это круг. И далее при помощи свойства shape-outside мы задали некие ограничивающие линии, которые не позволили нашему тексту расползтись по всему сайту.

Ознакомиться подробнее с HTML и CSS можно тут:

Итоги:
Итак, это был первый урок из рубрики «Магия CSS» и сегодня мы поговорили о том, как создать обтекание текста вокруг не стандартных форм.

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Источник

2.4. CSS-позиционирование

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

Схемы позиционирования

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Обтекание

Абсолютное позиционирование

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

2. Выбор схемы позиционирования: свойство position

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

Свойство не наследуется.

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

Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.

Отступы margin абсолютно позиционированных блоков не схлопываются.

Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения z-index перекрывающихся блоков.stickyПоложение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки.

«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.

«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.fixedФиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения.

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

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

3. Смещение блока: свойства top, right, bottom, left

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

Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

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

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

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

4. Обтекание: свойство float

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

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

Свойство не наследуется.

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

Рис. 2. Обтекание элементов

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

Для предотвращения отображение фона или границ под плавающими элементами используется правило .

6. Определение контекста наложения: свойство z-index

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

Рис. 3. Положение элементов вдоль оси Z

Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.

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

Свойство не наследуется.

6.1. Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

Источник

Плавающие элементы

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

Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:

а. Обтекания нет или float: none

б. Для картинки установлено float: left

в. Для картинки установлено float: right

Рис. 3.32. Обтекание картинки текстом

Сам HTML-код остаётся практически неизменным и привёден в примере 3.21.

Пример 3.21. Использование float

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Пример 3.22. Обтекание картинки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 3.33.

Рис. 3.33. Рисунок с выравниванием по левому краю и обтеканием по правому

Создание врезок

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

Рис. 3.34. Вид врезки

Чтобы врезка выделялась в тексте, у неё обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведённый выше способ обтекания текстом картинки, поэтому код для создания врезок практически идентичен предыдущему (пример 3.23).

Пример 3.23. Добавление врезки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Расположение слоев по горизонтали

Пример 3.24. Блоки по горизонтали

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 3.35.

Рис. 3.35. Расположение слоев при использовании свойства float

Влияние обтекания

Пример 3.25. Влияние обтекания

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 3.36. Влияние обтекания на нижележащий текст

Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся. Чтобы это обнаружить, достаточно обвести блок рамкой и поместить внутрь плавающий элемент с текстом (пример 3.26).

Пример 3.26. Высота блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Рисунок не оказывает воздействие на высоту слоя и выходит за его пределы (рис. 3.37).

Рис. 3.37. Высота слоя с плавающим элементом

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

Отмена обтекания

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

Ширина элемента

Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки. Для этого надо включить свойство width со значением 100%. Так, стиль в примере 3.25 можно дополнить следующим образом:

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

Использование overflow

Результат после применения свойства overflow сразу меняется (рис. 3.38).

Рис. 3.38. Влияние свойства overflow на фон

Аналогично дополняется пример 3.26:

Результат показан на рис. 3.39.

Рис. 3.39. Влияние свойства overflow на границу

Пример 3.27. Обрезание области элемента

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 3.40.

Рис. 3.40. Обрезание картинки

Свойство clear

Для отмены действия float применяется свойство clear со следующими значениями.

Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после плавающего. Обычно вводят универсальный класс, к примеру, clear и вставляют пустой тег

Пример 3.28. Использование clear

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Пример 3.29. Использование float

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Рис. 3.41. Ошибка с отображением строки

Псевдоэлемент :after

Частое включение пустого тега

Пример 3.30. Псевдоэлемент :after

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Браузер IE не поддерживает :after до версии 7.0 включительно, поэтому приведённый пример в этих версиях работать не будет. Добавление zoom : 1 к плавающему элементу отменяет обтекание в IE.

Источник