Float свойство css: разъяснение как работает css свойство float / Habr – Свойство float

Содержание

seodon.ru | CSS справочник — float

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

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

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

  1. Он старается максимально сместиться к левой или правой стороне родительского блока, а также к верхней границе строки, на которой находится или нижней границе предыдущего блока, если такой строки нет. Но он никогда не сместится на предыдущую строку или идущий перед ним блок.
  2. Блочные элементы находящиеся ниже в HTML-коде, располагаются так, будто всплывающего элемента вообще нет на странице. То есть они «подныривают» по него. А вот их содержимое и встроенные элементы «видят» всплывающий элемент и форматируются исходя из его присутствия, поэтому и получается обтекание. Более того, в связи с форматированием у «подныривающих» (блочных) элементов может измениться высота, если она не задана явно.
  3. Свойство float часто изменяет ширину всплывающего элемента. Это всегда необходимо учитывать, особенно при верстке макета сайта, и стараться задавать ширину явно.
  4. Если всплывающему элементу не будет хватать доступной ширины на текущей строке, то он будет смещаться ниже, пока ширины не станет достаточно.
  5. Если float указан у нескольких элементов, и они всплывают в одну сторону, то каждый из них будет прижиматься к боку предыдущего. Когда им перестанет хватать ширины родительского контейнера, часть их сместится на следующую строку и так далее.
  6. При использовании свойства float тип многих HTML-элементов меняется на блочный. Эта зависимость показана в следующей таблице.
Изменение типа элемента в зависимости от значения float.
Элемент не всплывает или float: nonefloat: left или right
inline-tabletable
inline, run-in, inline-block, table-caption, table-column-group, table-column, table-header-group, table-footer-group, table-row-group, table-row, table-cellblock
block, table, list-item, noneбез изменений

Ниже представлено два изображения с четырьмя блоками. У блоков не задан фоновый цвет. На втором изображении блок с зеленой рамкой всплывает влево.

Нормальное расположение блоков.

Всплытие одного из блоков (зеленого).

Тип свойства

Назначение: форматирование.

Применяется: ко всем элементам. Но, если у элемента установлено свойство display со значением none или он абсолютно позиционируется (свойство position), то значение float будет проигнорировано.

Наследуется: нет.

Значения

Значением свойства float является одно из ключевых слов задающих выравнивание.

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

Процентная запись: не существует.

Значение по умолчанию: none.

Синтаксис

float: left | right | none | inherit

Пример CSS: использование float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство float</title>
  <style type="text/css">
   body {
    color: white; /* цвет текста на странице */
   }
   #flo {
    background: green; /* зеленый фон плавающего SPAN */
    float:left; /* элемент всплывает влево */
    width: 150px; /* ширина элемента */
    height: 120px; /* высота */
    margin-right: 10px; /* внешнее поле справа */
   }
   .text {
    background: red; /* красный фон обычного SPAN */
   }
   .block {
    background: blue; /* синий фон параграфов */
   }
  </style>
 </head>
 <body>
  <div>
   <span>Этот SPAN всплывает влево.</span>
   <span>Текст после всплывающего SPAN.</span>
   <p>Параграф расположенный ниже.</p>
   <p>Еще один параграф расположенный ниже.</p>
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS float.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:
Internet Explorer
Google ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

IE 6.0 допускает довольно много ошибок при использовании float. Например, содержимое, обтекающее плавающий элемент, может ни с того ни с чего исчезнуть со страницы, но если окно браузера свернуть и развернуть — оно появится. Этот браузер всегда добавляет к выравниваемому элементу внешнее поле (margin) размером в 3px со стороны противоположной всплытию, причем его никак нельзя убрать. Если же понадобится создать внешнее поле, наоборот, с другой стороны, между краем родительского блока и всплывающим элементом, то IE 6.0 его удвоит. И это далеко не все баги.

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

Свойство CSS float.

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

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

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

05-05-2014 5-51-37

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

float: left | right | none | inherit

По сути, блок может быть обтекаемым либо справа, либо слева.

Значение none говорит о том, что элемент должен выводиться в нормальном потоке.

inherit — значение свойства float наследуется от родительского элемента.

Давайте посмотрим, как работает это свойство на практике.

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

1. Блочные элементы

<div>Блочный элемент без свойства float</div>
<div>Блочный элемент со свойством float</div>

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

2. Со строчными

<span>Строчный элемент со свойством float</span>
<span>Строчный элемент без свойства float</span>

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

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

<div>Блочный элемент без свойства float</div> <div>Блочный элемент со свойством float</div> <div>Блочный элемент без свойства float, который располагается после элемента с float.</div>

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

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

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

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

<div>
   <div>
       Элемент с float
   </div>
   Родительский элемент    
</div>

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

Далее. Следующие уроки по CSS.

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, создать любой дизайн сайта не составит особого труда.

css float

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

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

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

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

  • Float:inherit;
  • Float:right;
  • Float:left;
  • Float:none;
css float по центру

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

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

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

css float описание

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

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

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

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

свойство float css

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

  • :left;
  • :right;
  • :both;
  • :inherit;
  • none;

По аналогии можно понять, когда лучше всего применить функцию 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) справа, заголовком и нижним колонтитулом. Код будет таким:

css div float

Теперь необходимо разобраться, что же здесь написано. Родительский элемент, в котором находится основная часть 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.

#container {

width:40%;

float:left;

margin:10px;

}

#div {

width:40%;

float:right;

margin:10px;

}

#footer {

clear:both;

}

float css

В данном примере использование во втором контейнере функции (CSS Div) Float поможет создать стандартный сайт из двух колонок. Никогда не стоит забывать о функции Clear. Без нее получится только наложение элементов друг на друга.

Итак, как же изменить код CSS и Float так, чтобы использовать Postion? Очень просто:

#container {

width:40%;

position:relative;

margin:10px;

}

#div {

width:40%;

position:relative;

margin:10px;

}

В таком случае #container и #div примут нужное разработчику положение в родительском элементе. Главное? поместить #div и #container в один родительский элемент, который будет соответствовать их размерам.

Flexbox — как эта функция поможет заменить CSS Float?

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

Flexbox не является свойством, а отдельным модулем. Поэтому flexbox поддерживает целый ряд свойств, которые работают только с ним. К тому же у функции display, которая имеет три параметра inline, block и inline-block в flexbox остается только одна flex-flow.

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

Эта технология поможет разработчику легко выровнять элементы по горизонтали и вертикали. Также Flexbox может изменить направление и порядок отображения элементов. У этой технологии существует две оси: Main axis и Cross axis, вокруг которых и строится весь Flexbox. Также он убирает действие функций Float и Clear. Он строит свою систему в коде, в которой использует свойственные только ему свойства, поэтому, к сожалению, не удастся продублировать в элементах другие свойства, такие как Float и Position. А это было бы очень кстати, ведь, как говорилось выше, Flexbox работает только в новых версиях браузеров.

css float left

Стоит помнить, что в конечном итоге Position, Flexbox и Float делают одно и то же — создают необычный и оригинальный дизайн вашего сайта. Каждый вариант из рассмотренных в статье делает это по-своему и поэтому имеет как преимущества, так и недостатки. К тому же бывает, что где-то отлично подойдет функция Float (например, в сайте с простой структурой), а где-то лучше использовать Position или Flexbox.

Double Margin Bug

Однако иногда, к сожалению, у каждого разработчика возникают проблемы, связанные не с написанным кодом, а с багами в каком-то конкретном виде браузера. Например, в Internet Explorer существует баг, который называется Double Margin Bug. Он умножает параметр Margin на два, что приводит к смещению элементов сайта за границы браузера. Чтобы избежать этого, достаточно указать параметр Margin в процентах. Обычно этот баг происходит тогда, когда значение у свойства Margin и Float совпадает.

#div {

float:left;

margin-left:10px;

}

Такой код сместит элемент в Internet Explorer на 20 px влево. Можно изменить код так:

#div {

float:left;

margin-left:10%;

}

или же так,

#div {

float:left;

margin-right:10px;

}

Оба эти варианта решат проблему смещения элементов.

Баги браузера и некорректное отображение сайта

Стоит помнить, что Internet Explorer — не единственный браузер, в котором могут возникать баги. Старые версии Google Chrome и Mozilla также некорректно отображают некоторые элементы современных веб-сайтов. Для каждого из этих багов можно найти решение. В целом хочется отметить, что использование Float создаст оригинальный и привлекательный дизайн сайта. Понимание основ и принципов работы этого свойства позволит избежать ошибок и облегчит жизнь любому разработчику.

CSS свойство float | назначение, допустимые значения, примеры

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

Допустимые значения

  • left — выравнивает элемент по левому краю, остальные элементы обтекают справа
  • right — выравнивает элемент по правому краю, остальные элементы обтекают слева
  • none — элемент не обтекаем
  • inherit — наследует значение от родителя
Значение по умолчанию none
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

img {
float: left;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— .blockFloatLeft { width: 50px; background: #3490fb; float: left; margin: 0 5px 5px 0; text-align: center; padding: 5px 0; } .blockFloatRight { width: 50px; background: #3490fb; float: right; margin: 0 0 5px 5px; text-align: center; padding: 5px 0; } .blockClear { clear: both; background: yellow; text-align: center; } —> </style> </head> <body> <div>float: left</div> <div>Этот текст для демонстрации обтекания элемента</div> <div>Запрещаем обтекание для выравнивания элементов</div> <div>float: right</div> <div>Этот текст для демонстрации обтекания элемента</div> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

  • свойство float активно применяется при блочной верстке
  • для предсказуемого поведения плавающих блоков рекомендуется явно задавать ширину элемента (width)
  • «плавающий» элемент автоматически становится блочным, только нет переноса на новую строку после элемента
  • могут возникнуть некоторые проблемы с отступами плавающих блоков в IE6
Свойство empty-cells

Свойсво float в CSS

Лого SiteHere.ru