CSS свойство float на примерах.


Содержание

CSS свойство float на примерах.

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • Свойство float в CSS

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

*Наведите курсор мыши для приостановки прокрутки.

Свойство float в CSS

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

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

Видимая область (viewport)

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

Пример (Видимая область):

Начальный содержащий блок (the initial containing block)

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

Пример (Начальный содержащий блок):

Содержащий блок / контейнер (Сontaining box)

Содержащий блок — это блок, который содержит другие элементы (блоки-потомки).

Пример (Несколько параграфов внутри содержащего блока):

Блочный элемент (Block level element)

Блочные элементы — это такие элементы, которые визуально представляются в виде прямоугольников. Например, параграф текста.

Пример (Блочный элемент):

Строчный элемент (Inline-level element)

Строчные элементы — это такие элементы, которые не формируют новых блоков контента; содержимое распределяется в строку. Например, выделенный курсивом текст внутри параграфа.

Пример (Строчный элемент):

Нормальный поток (Normal flow)

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

Пример (Контент в Нормальном потоке):

Вне Нормального потока (Out of normal flow)

Когда контейнер извлекается из Нормального потока, тот контент, который находится в Нормальном потоке будет полностью игнорировать его присутствие и не предоставит места для этого контейнера.

Пример (Контент Вне Нормального потока):

Статичное позиционирование (Static positioning)

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


Плавающее позиционирование (Float positioning)

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

Относительное позиционирование (Relative positioning)

Относительно позиционированными называются элементы, которые спозиционированы внутри Нормального потока, после чего смещены.

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

Пример (Относительно позиционированный контент):

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

Абсолютно спозиционированный контейнер полностью извлекается из Нормального потока.

Пример (Абсолютно позиционированный контент):

Фиксированное позиционирование (Fixed positioning)

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

Теперь перейдем к рассмотрению основ свойства float.

Что такое float?

Когда вы используете для элемента свойство float, то он становится Блочным элементом. Этот элемент потом можно сдвигать влево и вправо по теукщей линии. Значения, которые может принимать свойство float: float: left, float: right и float: none.

Пример (элемент с float: left):

Пример (элемент с float: right):

Контейнер, к которому применено свойство float, располагается в соответствии с Нормальным потоком, затем извлекается из потока и смещается влево или вправо на максимально возможное расстояние. Контент может обтекать контейнер с правой стороны, если для контейнера задано float: left и с левой стороны, если для контейнера задано float: right.

Пример (элемент с float: left обтекается справа):

Пример (элемент с float: right обтекается слева):

Также можно размещать несколько плавающих блоков рядом друг с другом.

Пример (Три элемента без применения свойства float):

Пример (Три элемента c применением float: left):

Пример (Три элемента c применением float: right):

Куда сдвинется элемент, к которому применено свойство float?

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

Пример (элемент с float: left и Начальный содержащий блок):

Пример (элемент с float: right и Начальный содержащий блок):

Пример (элемент с float: left и Cодержащий блок):

Пример (элемент с float: right и Cодержащий блок):

Пример (элемент с float: left и другой плавающий блок):

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

Пример (элемент с float: left смещен вниз):

Нужно ли задавать ширину элементам со свойством float?

Да, ширину следует задавать всегда (кроме тех случаев, когда float применяется напрямую к картинке с неизвестной шириной).

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

Пример (элемент с float: left без заданной ширины):

Элементы над и под плавающими элементами

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

Пример (элемент с float: left с элементом над ним):

Пример (элемент с float: left с элементом под ним):

Границы, фоновые рисунки и фоновый цвет

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

Пример (Блочный элемент с границей под элементом с float: left):

Пример (Блочный элемент с фоновым цветом под элементом с float: left):

Плавающие блоки и свойство clear

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

Данное свойство обычно используется с четырьмя значениями: left, right, both и none. Также используется и пятое значение inherit для наследования значения родителя.

clear: left

Элемент перемещается ниже внешнего нижнего края блока с float: left

Пример (блок с float: left и применение clear: left к Блочному элементу, находящемуся под ним):

clear: right

Элемент перемещается ниже внешнего нижнего края блока с float: right

Пример (блок с float: right и применение clear: right к Блочному элементу, находящемуся под ним):

clear: both

Элемент перемещается ниже всех плавающих блоков.

Пример (блок с float: left и применение clear: both к Блочному элементу, находящемуся под ним):

clear: none

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

По материалам http://css.maxdesign.com.au
Перевод — Дмитрий Науменко

P.S. Изучаете CSS, чтобы освоить верстку сайтов? Посмотрите еще серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

CSS: свойство float

категория
Веб технологии
дата 26.03.2015
автор AlexVovolka
голосов 15

Свойство Float это значимый и мощный актив для web-developer-ов работающих с HTML и CSS. C другой стороны, он может вызывать одно разочарование и путаницу если вы не до конца понимаете как это свойство работает.

Перевод статьи CSS Floats 101. Оригинал alistapart.com

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

Мы видим float каждый день в мире печати, когда рассматриваем статью в журнале с изображением расположенным слева или справа и текстом красиво расположенным вокруг него. В мире HTML/CSS, текст будет обвертывать изображение в зависимости от свойства float, которое применяется к этому изображению. Использование свойства float к изображению, это все лишь один из многих примеров. Еще как пример, с помощью свойства float, мы можем очень легко сделать популярный двухколоночный макет. А на самом деле, вы можете применять свойство float к любому элементу в вашем HTML. Изучив и поняв применение свойства float, вместе с свойством position, вы сможете комфортно и уверенно себя чувствовать при создании любого макета.

Определение float


Давайте начнем с определения, что такое float.

Float это условно коробка, которая двигается вправо или влево по текущей линии. Наиболее интересная характеристика float в том, что контент может обтекать вдоль его стороны. При применении свойства float: left, контент будет обтекать коробку вниз с правой стороны и аналогично при float: right — вниз с левой стороны.

Свойство float имеет 4 значения, которые мы можем применять: left , right , inherint и none . Каждое значение довольно понятно. К примеру, если вы используете float: left к элементу, то он переместится в крайнюю слева границу относительно своего родительского элемента. И, если вы зададите float: right , то элемент аналогично переместится в право. Значение ihnerit говорит элементу унаследовать свойство от своего родительского элемента. И последнее значение none является значением по умолчанию и говорит не применять свойство float к данному элементу.

Вот простой Пример A обтекания текста вокруг изображение и ниже соответствующий CSS:

Поведения floats

Ничего сложного, но все еще не до конца понятно? Прежде чем мы перейдем в мир float-ов, давайте вернемся немножко назад, чтобы обсудить что на самом деле происходит. В мире web, наш HTML связан несколькими правилами, в частности правило нормального потока. При нормальном потоке, каждый блочный элемент (div, p, h1, etc) располагается вертикально друг над другом, начиная из верхней части окна и дальше вниз. Элементы с свойством float изымаются из нормального потока и отправляются в крайний правый или левый край своего родительского элемента. Другими словами, они перестают располагаться друг над другом и становятся друг возле друга, говоря что в родительском элементе достаточно места чтобы расположится рядом всем элементам со свойством float. Важно помнить данное поведение при постройке вашего сайта.

Давайте рассмотрит еще один Пример B, в нем три блока без применения свойства float.

Обратили внимание что все блоки расположены вертикально друг над другом? Это и есть концепция нормального потока. Ниже очередной Пример C , только в этот раз к элементам мы применим свойство float: left .
Теперь блоки расположены друг возле друга. Отлично, мы получили то, в чем разбирались. Но как насчет той части, где я сказал «говоря что в родительском элементе достаточно места чтобы расположится рядом всем элементам»? Я думал вы никогда не спросите меня об этом. Давайте возьмем наш последний пример и увеличим количество блоков в пять раз. В нашем случаи, body является родительским элементом наших блоков. Заметьте, что в зависимости от размеров окна вашего браузера. блоки переносятся на следующую сточку, так как им не достаточно места, чтобы располагаться друг возле друга. Если вы будете менять размер окна вашего браузера, то и блоки будут автоматически перестраиваться. Попробуйте сами, вот вам Пример D.

In the clear

Как вам зеленый блок? Подождите, где он? Он здесь, спрятан под розовым блоком. Розовый и Синий блоки оба имеют свойство float и ведут себя так, как мы ожидали, т.е расположены друг возле друга. Но так как они были изъяты из нормального потока, то зеленый и оранжевый блоки ведут себя так, как будто их (розового и синего) вообще нет на странице. Вот почему наш зеленый блок спрятан под розовым. Итак, как же нам теперь снова показать наш зеленый блок? Указать свойство clear.

Свойству clear доступно пять значений: left , right , both , inherit и none . Значение left отменяет обтекание с левого края этого элемента. Аналогично при clear: right ; — отменяет обтекание этого элемента с правого края. Используя both значение отменяет обтекание элемента одновременно с правого и левого края. При значении inherit свойство clear унаследует значение от своего родительского элемента, а значение none (по умолчанию) отменяет действие свойства clear и обтекание элемента происходит так, как задано с помощью других. Вооружившись этими знаниями давайте взглянем на Пример Е2. В этот раз мы применили свойство clear к нашему зеленому блоку. Наш немножко измененный код теперь выглядит так:

Устанавливая значение clear: left к нашему зеленому блоку, мы говорим ему вести себя как будто розовый блок находится в нормальном потоке, несмотря на то что он был изъят, и расположится под ним. Это очень мощное свойство; как вы видите, оно помогает вернуть наши элементы без float свойств в нормальный поток, т.е. к поведению, которое мы склонны ожидать по умолчанию.

Цукерберг рекомендует:  Django - Есть работа с Django CMS, нужно еще вчера, естессно

Применения floats в макетах

Давайте перейдем к макетам. Это место, где свойство float невероятно полезно. Мы можем создать традиционный двухколонный макет несколькими путями; большинство из них состоят из одного или двух элементов со свойством float. Давайте рассмотрим простой пример: двухколонный web сайт с контент колонкой справа и навигацией слева, а также хедер (header) и футер (footer) к довершению всему. В этой статье мы будем обращать внимание на код, только связан с float-ed элементами. Вот Пример F:

Еще один Пример , если кому интересно поиграться.

Хорошо, давайте теперь поговорим о том, что здесь происходит. Наш родительский контейнер имеет метку (id) #container . Он хранит в себе наши floated элементы. Если бы его не было, то наши floated элементы расположились бы по самым дальним краям окна просмотра, слева и справа. Следующим мы создали блоки #content и #navigation . Это наши элементы к которым мы будем применять свойство float. Мы отправили наш #content влево и #navigation вправо, чтобы получить двухколонный макет. Я указал ширины блоков, поэтому они заполнили все пространство нашего родительского контейнера. И наконец мы создали #footer , которому мы установили clear свойство. Как нам уже известно, это свойство возвращает элементы следующие за floated элементами в нормальный поток. В данном случае, наш #footer имеет значение clear: both , что располагает его ниже обоих элементов #content и #navigation .

А что произойдет если мы не укажем clear свойство нашему #footer ? Взгляните на этот Пример G.

Наш #footer прилип под блоком #navigation . Это произошло, так как под блоком #navigation есть место для #footer и для нормального потока расположения блоков это правильное поведение. Но, это абсолютно не то что нам нужно, не правда ли? Предполагаю вы уже видите взаимосвязь между float и clear и понимаете как они дополняют друг друга.

Если у вас одержимо-маниакальное расстройство, как у меня, вы могли заметить в Пример F разные высоты столбцов #content и #navigation ; есть несколько способов решения, но это выходит за рамки данной статьи. Настоятельно рекомендую почитать Faux Columns автора Dan Cederholm чтобы изучить как сделать одинаковой высоты блоки, в не зависимости от контента внутри.

Float first

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

Здесь мы имеем маленький блок, который имеет картинку с свойством float:right и текстом окружающим ее. Наш CSS выглядит так:

Наш родительский элемент #container имеет узкую ширину и удерживает наш floated элемент (изображение) внутри своих границ. Наш HTML код выглядит так:

Этот пример дает нам желаемый результат, но что если возьмем и переставим местами некоторые элементы в HTML? В Примере I я переместил после текста

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

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

Во-вторых. Причина по которой изображение кажется торчащим внизу из нашего блока #container, связана с чем-то под названием collapsing (деформация). Давайте поговорим про collapsing и варианты решения.

Collapsing

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

В Примере I, наш родительский элемент #container деформирован, как будто floated img элемента вообще нет внутри. Это не ошибка браузера, а ожидаемое и правильное поведение. Поскольку элементы со свойством float изначально были добавлены в нормальном потоке а потом удалены, то блок #container не учитывает их внутри своих границ и ведет себя как будто их даже не существует.

Примечание. Eric Meyer написал прекрасную статью Containing Floats, которая более детально разбирает данное поведение и является очень полезной.

Хорошей новостью является то, мы можем решить эту проблему в множеством способов; если вы предполагаете, что это связано со свойством clear , то вы на правильном пути.

Один из самых распространенных метод исправить деформацию родительского блока это поместить элемент с clear:both свойством после нашего floated элемента. Это приведет к тому, что родительский элемент продолжит нормальный порядок после floated элемента. Будет проще показать это на действии. Взгляните на HTML для Примера J , который аналогичен предыдущему примеру, только с одним дополнительным элементом:

Добавляя div с стилем clear: right нам удалось заставить наш #container обвернуть наше floated изображение путем пересчета его высота, так как теперь внизу еще один элемент. Данное решение работает, но оно может быть не самым элегантным решением, так как нам нужно добавить дополнительный элемент в нашу разметку. Было бы лучше справиться с помощью CSS. Есть несколько путей решения и давайте взглянем на одно из них прям сейчас.

Рассмотрим данный пример, родительский элемент содержит три изображения с свойством float . Наш HTML выглядит следующим образом:

Посмотрев на код выше, вы быстро догадаетесь, что наш родительский элемент не содержит floated изображения. И снова, это было ожидаемо, потому так floated элементы изымаются из нормального потока и соответственно наш родительский элемент #container будет пустым. Взгляните на Пример К.

Теперь давайте попробуем исправить это с помощью CSS вместо добавления дополнительной HTML разметки в наш документ, как мы это делали раньше. Существует метод, которые позволяет родительскому элементу «применить» свойство clear после всех floated элементов. Для этого используется CSS свойство overflow со значением hidden . Примите во внимание что свойство overflow не было предназначено для такого использования и может стать причиной возникновения некоторых проблем, таких как скрытие контента или появление нежелательного скроллбара. Для нашего примера, однако, мы все же применим свойство overflow: hidden к нашему родительскому элементу #container :

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

В данном случаи, с помощью CSS, мы добавляем новый элемент в наш родительский элемент #container и задаем ему значение hidden и heigh: 0 . Вы можете найти очень тщательный и подробный обзор этой техники на сайте Position is Everything.

И напоследок, Eric Meyer объясняет третий вариант решения данной проблемы в своей статье Containing Floats. В соответствии CSS Spec 2.1:

элемент со свойством float будет расширять свои границы для floated элементов находящихся внутри.

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

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

Заключение

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

Для закрепления материалы советуем тест знаний CSS-Основы и CSS-Средний уровень.

Если Вам понравилась статья, проголосуйте за нее

float

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

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

CSS свойство float позволяет сделать элемент плавающим, смещая его к левому или правому краю родительского элемента, в зависимости от того, какое значение установлено. Если для плавающего элемента явно не установлена ширина (width), то он сжимается по ширине до размеров содержимого.

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

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

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

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

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

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

  1. Задать фиксированную высоту — в тех случаях, когда известно какая должна быть высота контейнера.
  2. Применить свойство overflow со значением auto или hidden к контейнеру, тогда плавающие элементы будут учитываться при вычислении высоты контейнера. Этот способ можно использовать когда заранее не известно какая должна быть высота контейнера.

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

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

CSS свойство float

Свойство float определяет, с какой стороны контейнера будут расположены элементы. При этом текст или остальные элементы будут обтекать его с других сторон. Свойство имеет три значения — none, left и right.

Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute).

Значение по умолчанию none
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.cssFloat = «right»;

Синтаксис

Пример

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


Заметки разработчика

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

вторник, 4 января 2011 г.

CSS: Всё о float

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

Что такое «float»?

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

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

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

Установка свойства float для элементов с помощью CSS выглядит следующим образом:

Есть четыре допустимых значения для свойства floatleft, right, none, inherit. Первые два, left и right указывают направления расположения — слева и справа, соответственно. None — значение по умолчанию, указывает что элемент не плавающий и inherit указывающий элементу наследовать значение свойства float от родительского элемента.

Для чего используется float?

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

Float, так же удобно использовать для небольших элементов макета. К примеру, возьмём этот небольшой фрагмент веб страницы. Если мы установим свойство float для небольшого изображения аватара, то когда изменится размер изображения обтекание измениться в соответствии с новыми размерами изображения:

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

Сброс обтекания

Clear родственное свойство свойству float. Элемент с установленным свойством clear не будет двигаться вверх обтекая элемент с установленным свойством float, но будет смещаться вниз игнорируя обтекание. И снова иллюстрация, которая объяснит всё без лишних слов.

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

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

Великий коллапс

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

Но альтернатива такого коллапса ещё хуже. Рассмотрим следующий сценарий:

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

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

Техники отмены обтекания

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

Цукерберг рекомендует:  Genymotion на windows 10 - Не работает Genymotion.

Метод пустого блока.

Это в буквальном смысле пустой блок.

Метод переполнения.

Основан на указании CSS свойства overflow для родительского элемента. Если это свойство установлено в auto или hidden для родительского элемента, то он будет расширятся вслед за плавающим элементом эффективно сбрасывая обтекание его для последующих элементов. Этот метод может быть семантически красив, так как не требует дополнительных элементов. Однако, как вы видите мы добавили новый div для использования этого метода, что эквивалентно использованию не семантического пустого блока и менее гибко. Так же следует помнить, что свойство overflow предназначено не для отключения обтекания. Будьте осторожны что бы случайно не скрыть контент или вызвать нежелательные полосы прокрутки.

Метод лёгкой очистки.

Использует CSS псевдо-селектор ( :after ) для удаления обтекания. Вместо использования свойства overflow для родительского элемента установите дополнительный класс для него, например ‘clearfix’ и используйте следующий стиль CSS :

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

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

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

Проблемы с плавающими элементами

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

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

Быстрое решение проблемы: используйте overflow: hidden; для обрезания излишков.

Баг с двойными полями (double margin bug) — ещё одна вещь о которой необходимо помнить работая с IE6 . Этот баг выражается в том, что если поле находится с той же стороны куда ориентирован float, поле удваивается. Например:

Мы получим слева поле в 40 px., вместо 20 px.

Быстрое решение проблемы: установить display: inline для плавающего блока, и не волнуйтесь элемент останется блочным.

3х пиксельный толчок (3px Jog). Суть этого бага в том, что текст расположенный рядом с плавающим элементом странным образом смещается на три пикселя, как будто под воздействие силового поля расположенного вокруг плавающего элемента. Быстрое решение проблемы: установить ширину и высоту пострадавшего текста.

В IE7 появляется Баг нижнего отступа (bottom margin bug), когда родительский элемент является плавающим и его потомок расположенный внутри него тоже плавающий элемент. Нижнее поле ( margin-bottom ) потомка игнорируется, элементом предком. Быстрое решение проблемы: Использовать нижнее поле ( padding-bottom ) в родительском элементе, вместо нижнего отступа ( margin-bottom ) потомка.

Оригинальная статья: All About Floats

CSS свойство float на примерах.

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

Позиционирование изображений с помощью CSS свойства float

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

Значения свойства float:

-right – позиция справа;

-left – позиция слева;

-inherit – наследует значение родителя;

-none – отсутствует. Данное значение стоит по умолчанию.

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

Для более наглядного понимания обратите внимание на изображение ниже, которое иллюстрирует применение данного свойства для изображений.

В качестве примера рассмотрим приведенный ниже код:

CSS Float: описание, свойства

Float — одна из базовых функций языка CSS (Cascading Style Sheets — форматирование каскадных таблиц). Этот язык существует с 1996 года и до сих пор продолжает развиваться. На данный момент разработчики используют уже третью версию CSS. С помощью языка программирования CSS возможно создать вполне красивый и приятный сайт, который не будет казаться устаревшим или неудобным для пользователя, даже если совершенно не применять JavaScript. Современные возможности третьей версии позволяют это сделать.

Также разработчики могут использовать более удобные варианты форматирования, такие как Flexbox или Position для смены места элемента на сайте, но обо всем по порядку. Для начала следует разобраться с преимуществами и недостатками свойства Float.

CSS Float — зачем он нужен?

Float — свойство для позиционирования элементов. Каждый день его можно наблюдать на страницах газет и журналов, смотря на картинки и текст, который очень аккуратно обтекает их вокруг. В мире кодов HTML и CSS при использовании функции Float должно произойти то же самое. Но стоит помнить, что редактирование изображений далеко не всегда является основным назначением этой функции. Ее можно использовать для создания популярного расположения элементов сайта в две, три, четыре колонки. На самом деле, свойство Float CSS применяется практически к любому html-элементу. Зная основы редактирования расположения элементов с помощью функции Float, а затем и Property, создать любой дизайн сайта не составит особого труда.

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

CSS Float описание свойства

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

У свойства Float есть четыре значения:

Для тех, кто знает английский, значения параметров свойства Float должны быть понятны. Но для тех, кто не знает, можно привести небольшое объяснение. Параметр :left; перемещает тело элемента в самый крайний левый угол родительского элемента. То же происходит (только в другую сторону) при bcgjkmpjdfybb параметра :right;. Значение :inherit; приказывает элементу взять на себя те же настройки, что и у родительского. Такие элементы еще называются дочерними, так как они располагаются непосредственно внутри родительского в html-коде. А свойство :none; позволяет элементу не нарушать обычного течения документа, оно устанавливается по умолчанию для всех частей кода.

Как Float работает?


Свойство Float CSS работает достаточно просто. Все, что было описано выше, можно сделать без особого труда. Дальше все будет так же просто. Но прежде чем продолжить изучение свойства Float, стоит немного разобраться в теории. Каждый элемент веб-сайта является блоком. Легко убедиться в этом, открыв консоль в Google Chrome нажатием Ctrl + Shift + J. Текст, заголовок, картинка, ссылки и все остальные составные части сайта будут отображаться блоками, просто разных размеров. Изначально все эти блоки идут друг за другом. Как видно на примере ниже, строки кода идут друг за другом, поэтому и отображаться они будут строго друг за другом.

Это называется normal flow (нормальное течение). При таком течении все блоки ложатся друг на друга (не пересекая тела элементов) вертикально. Изначально все содержимое веб-страницы расположено именно таким образом. Но при использовании, например, свойства языка CSS Float Left, элемент покидает свое естественное положение на странице и смещается в крайнее левое положение. Такое поведение неизбежно приводит к столкновению с теми элементами, которые так и остались в нормальном течении.

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

Функция Clear для решения проблем

У функции Float есть сердечный друг — Clear. Вместе они — не разлей вода. Обе эти функции дополняют друг друга и делают разработчика счастливым. Как было указано выше, соседние элементы выходят из своего нормального течения и тоже начинают «плавать», как и элемент, к которому применили свойство Float (например, CSS Float Top). В итоге вместо одного плавающего элемента получаются два, причем совсем не в том месте, где их намеревался расположить разработчик. С этого момента как раз и начинаются все проблемы.

У функции Clear есть пять значений:

По аналогии можно понять, когда лучше всего применить функцию Clear. Если у нас написана строчка в коде Float:right; (CSS-код имеется ввиду), то функция должна быть Clear:right;. То же самое качается и свойства Float:left; дополнять его будет Clear:left;. При написании кода Clear:both; получится, что элемент, к которому применяется эта функция, будет находиться ниже элементов, к которым применена функция Float. Inherit берет настройки у родительского элемента, а none не вносит никаких изменений в структуру сайта. Если понять, как работают функции Float и Clear, можно написать уникальный и необычный HTML и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде.

Использование Float для создания колонок

Особенно полезно свойство Float при создании колонок на сайте (или расположении контента CSS Float по центру веб-страницы). Именно такой код является самым практичным и удобным, поэтому стоит рассмотреть несколько вариантов создания привычного шаблона сайта, состоящего из двух колонок. Для примера возьмем стандартный веб-сайт с контентом слева, навигационной панелью (navigation bar) справа, заголовком и нижним колонтитулом. Код будет таким:

Теперь необходимо разобраться, что же здесь написано. Родительский элемент, в котором находится основная часть html-кода, назван контейнером (container). Он позволяет не дать элементам, к которым применена функция Float, разбрестись в разные стороны. Если бы его не было, то эти элементы уплыли бы до самых границ браузера.

Затем, в коде идут #content и #navigation. К этим элементам применяется функция Float. #content отправляется налево, а #navigation идет направо. Это необходимо для создания сайта из двух колонок. Обязательно нужно указать ширину, чтобы объекты не наложились друг на друга. Ширину можно указывать и в процентах. Так даже удобнее, чем в пикселях. Например, 45 % для #content и 45 % для #navigation, а оставшиеся 10 % отдать свойству margin.

Свойство Clear, которое находится в #footer, не дает нижнему колонтитулу последовать за #navigation и #content, а оставляет его на том же самом месте, на котором он и находился. Что может произойти? если не указать свойство Clear? В данном коде #footer просто-напросто пойдет вверх и окажется под #navigation. Это случится из-за того, что у #navigation достаточно места для размещения еще одного элемента. На этом наглядном примере очень хорошо видно, как свойства Clear и Float дополняют друг друга.

Неприятности, с которыми можно столкнуться при написании кода

Указанные выше примеры достаточно просты. Но и с ними могут возникнуть проблемы. Вообще, на самом деле, множество неожиданных неприятностей может случиться с функцией Float. Как бы ни было странно, но проблемы обычно возникают не с CSS, а с html-кодом. Место, где расположен элемент с функцией Float в html-коде, напрямую влияет на работу последней. Для того чтобы избежать различного рода затруднений, лучше всего придерживаться простого правила — располагать элементы с функцией Float первыми в коде. Почти всегда это работает и сводит к минимуму их неожиданное поведение.

Столкновение элементов

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

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

Но проблему столкновения элементов веб-страницы можно решить и по-другому. Существует еще по крайней мере два способа:

  • использование функции Position;
  • применение Flexbox.

Функция Position порой является неплохой альтернативой CSS Float. По центру веб-страницы в случае применения Position лучше всего расположить изображения. Если правильно применить значения :absolute и :relative, то элементы встанут на свои места и не будут накладываться друг на друга.

Разбор кода функции Position и Float

Стоит разобраться подробнее с тем, как в коде HTML и CSS Float заменить на Position. На самом деле это очень просто. Допустим, есть элемент #container и #div.

Float и clear — CSS свойства для плавающих элементов при блочной верстке

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

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

Плавающие элементы встречаются также в HTML при необходимости создать обтекание тех же изображений текстом (атрибут align тега img с параметрами left и right). Так что этот аспект весьма популярен при разработке содержания вебстраниц.

На протяжении сегодняшней публикации разберем действия правила float (left, right, none) и clear в том числе применительно к тегам DIV и SPAN, которые являются основой при блочной верстке. Конечно, на современном этапе подавляющее большинство использует при создании сайта прогрессивные CMS (в частности, WordPress). Однако, поверьте, что знания основ стилей и языка гипертекстовой разметки сослужат вам добрую службу в дальнейшем.

Как создаются плавающие элементы в CSS с помощью float

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

Одним из таких инструментов является, к примеру, CSS position (relative, absolute, fixed), о котором подробнее можете почитать по приведенной ссылке. Ну а другим средством, позволяющим изменить порядок стандартного отображения вебэлементов, как раз и служит правило float.

Данные по любому свойству (propety) CSS и его значениям можно почерпнуть со страницы спецификации W3C, где дана полновесная информация (данные по второй версии таблиц стилей, но это справедливо и для CSS3, которая уже действует официально, хотя до конца не доработана):

Цукерберг рекомендует:  Вакансии ООО Гарпикс

Как видите, float может принимать один из трех возможных параметров (left, right, none) и наследует значение родителя (inherit). Параметр float none применяется по умолчанию и означает, что элементы будут отображаться в порядке, соответствующем обычному потоку. А вот right или left позволяют создавать плавающие блоки со смещением вправо или влево соответственно.

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

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

Для наглядности подключим правила CSS с помощью внутренних стилей атрибута STYLE (такой метод на практике обычно редко применяется, но он очень удобен при тестировании).

С тем, чтобы убедиться в правильности выше сказанного, возьмем два строчных тега, прописав для них свойства width и height, а также один блочный тег. С целью обеспечения наглядности зададим цветовые оттенки для каждого блока с помощью background (аналогично можно использовать background-color):

Результирующая картинка будет следующей:

Как видите, мы получили практическое подтверждение, что указанные высота (height:50px) и ширина (width:450px) не работают в обычных условиях для тега SPAN, который является строчным. Далее попробуем прописать свойство float right для первого строчного вебэлемента и float left для второго:

В итоге получаем:

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

Более того, вебэлементы, определяемые строчным тегом SPAN, по другому стали взаимодействовать с соседним контейнером DIV. Если далее убрать, скажем, атрибут width из стилей обоих тегов SPAN, то их ширина будет определяться содержанием (в нашем случае длиной текста с названием элементов):

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

Подытоживая, определим некоторые особенности, которые будут присущи контейнеру с тем или иным значением свойства float (right или left):

  • Элемент смещается к левому или правому краю;
  • Он становится блочным вне зависимости от того, каким он был до этого;
  • Ведет себя таким образом, как будто соседних блочных вэбэлементов (с правилом display:block) не существует. В этом вы можете убедиться, если еще разок взгляните на скриншоты данного раздела статьи;
  • В то же время строчные теги (display:inline) будут обтекать плавающие блоки. Если вновь посмотрите на предыдущий скриншот, то заметите, что содержание DIV контейнера («Блочный элемент») обтекает SPAN с float:left справа.
  • Если явно не указывать ширину плавающего блока (в нашем примере width:450px), то она будет определена его содержимым;

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

Каким образом сделать горизонтального меню посредством CSS (float)

Далее разберем вполне конкретное задание по созданию горизонтального меню с помощью плавающих блоков, которое весьма часто используется при разработке вебсайтов. Сначала сконструируем маркированный список HTML посредством тега UL, код которого будет выглядеть так:

Получим примерно следующее:

Теперь немного подредактируем полученное меню с помощью CSS свойств: уберем маркеры напротив каждого из пункта при помощи list-style none, преобразуем строчные теги гиперссылок в блочные, применив к ним правило display block, а также для разнообразия придадим каждой из них приятный фон.

Также нелишним будет задать отступы margin, чтобы еще более улучшить дизайн, немного отодвинув пункты меню друг от друга. Для вебстраниц сайта WordPress можно задать тегу UL class «menu», для которого указать необходимые стили в файле STYLE.CSS:

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

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

В итоге менюшка превратиться в горизонтальный вариант:

Думаю, на основании выше предоставленной информации вам понятна причина, по которой произошла такая метаморфоза. Каждый вебэлемент меню с float left ориентируется на расположение контейнера, его границы и пытается занять место, сдвинувшись максимально вверх-влево. Так и случилось с блоком «Пункт 1», который расположился соответствующим образом.

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

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

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

Тогда «Пункт 3» будет выравнивать свое положение по нижней границе последнего вэбэлемента в верхнем ряду и только потом переедет влево. Все описанные выше телодвижения должны помочь вам осмыслить суть воздействия float на расположение вебэлементов страницы.

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

Эффект применения свойства clear (both, left, right)

Теперь посмотрим, как использовать на свое благо особенности плавающих элементов, но одновременно заставить ниже следующие блоки на вебстранице учитывать их положение и размеры. Этого можно добиться с помощью правила clear. Опять же всю информацию можно получить от первоисточника (консорциума W3C):

Правило CSS clear имеет четыре возможных значения, причем property none является параметром по умолчанию, что вполне естественно, поскольку в этом случае обеспечивается стандартный поток кода. Также clear (none, left, right, both) наследуется от родительского тега (inherit).

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

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

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


Итак, возьмем два контейнера DIV, которые схематически могут представлять из себя 2 колонки. Пропишем для них CSS свойства, включая фиксированную ширину (width), цвет фона и превратив их в плавающие с помощью float left. Добавим к ним текст, заключенный в тег P, который, как известно, является строчным:

Блоки DIV выстроятся в горизонтальный ряд, причем первый займет крайнее левое положение, насколько это возможно. А второй припаркуется к его правому краю (для него это будет расположение слева), дальше не позволит сдвинуться первый див. А вот текст продолжит этот ряд, так как общая ширина позволяет это сделать:

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

Опять же можете сами посмотреть вот здесь, как поведут себя все элементы, искусственно сужая-расширяя область просмотра. Чтобы устранить описанные недостатки, добавим контейнер со свойствами CSS и поместим внутрь его все имеющиеся слои. А также добавим дополнительно пустой DIV с правилом CSS clear both, чтобы запретить обтекание содержанием нижнего блока (текстом) колонок справа и слева:

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

Теперь наша задача решена, поскольку итог соответствует поставленным условиям: две колонки расположены в горизонтальном ряду, а содержание ниже стоящего в коде вэбэлемента (ТЕКСТ) будет жестко оставаться на своем законном месте под колонками.

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

CSS Layout — float and clear

Свойство CSS float указывает, как элемент должен плавать.

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

Свойство float

Свойство float используется для позиционирования и компоновки на веб-страницах.

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

  • left — Элемент плавает слева от контейнера
  • right — Элемент плавает справа от контейнера
  • none — Элемент не плавает (будет отображаться только там, где это происходит в тексте). Это значение по умолчанию
  • inherit — Элемент наследует значение float родительского элемента

In its simplest use, the float property can be used to wrap text around images.

Пример-float: вправо;

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.

Пример

Пример-float: левый;

В следующем примере показано, что изображение должно плавать в тексте слева :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.

Пример

Пример-без поплавка

В следующем примере изображение будет отображаться именно там, где оно происходит в тексте (float: нет;):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.

Пример

Свойство Clear

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

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

  • none — Позволяет использовать плавающие элементы с обеих сторон. Это значение по умолчанию
  • left — С левой стороны не допускается плавающие элементы
  • right- С правой стороны не разрешены плавающие элементы
  • both — Плавающие элементы не разрешены ни слева, ни справа Стороне
  • inherit — элемент наследует значение Clear родительского элемента

Наиболее распространенным способом использования свойства clear является использование float свойства элемента.

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

Следующий пример очищает поплавок влево. Означает, что на левой стороне (Div) не разрешены плавающие элементы:

Пример

Clearfix Hack

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

Without Clearfix

With Clearfix

После этого мы можем добавить overflow: auto; к содержащему элементу для того чтобы зафиксировать эту проблему:

Пример

Переполнение: Auto clearfix работает хорошо, пока вы в состоянии держать контроль над полями и обивка (иначе вы можете увидеть полосы прокрутки). новый, современный clearfix Hack тем не менее, является более безопасным в использовании, и следующий код используется для большинства веб-страниц:

Пример

Вы узнаете больше о псевдо-элементе ::after в более поздней главе.

Изображения бок о бок

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

Пример

Используйте float со списком гиперссылок для создания горизонтального меню:

Пример

Пример веб-макета

Также общепринято делать целые веб-макеты с помощью свойства float :

Пример

.header, .footer <
background-color: grey;
color: white;
padding: 15px;
>

.column <
float: left;
padding: 15px;
>

.clearfix::after <
content: «»;
clear: both;
display: table;
>

Другие примеры

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

Изображение с надписью, плавающей вправо
Пусть изображение с надписью поплавок вправо.

Пусть первая буква абзаца поплывет влево
Пусть первая буква абзаца поплавок влево и стиль буквы.

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

CSS свойство float на примерах.

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

Позиционирование изображений с помощью CSS свойства float

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

Значения свойства float:

-right – позиция справа;

-left – позиция слева;

-inherit – наследует значение родителя;

-none – отсутствует. Данное значение стоит по умолчанию.

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

Для более наглядного понимания обратите внимание на изображение ниже, которое иллюстрирует применение данного свойства для изображений.

В качестве примера рассмотрим приведенный ниже код:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих