Описание

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

Синтаксис

float: left | right | none | inherit

Значения

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

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

Рис. 1. Применение свойства float

Объектная модель

document.getElementById("elementID ").style.styleFloat

document.getElementById("elementID ").style.cssFloat

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Форматирование каскадных таблиц). Этот язык существует с 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:inherit;
• Float:right;
• Float:left;
• Float:none;

Для тех, кто знает английский, значения параметров свойства 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 есть пять значений:

• :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) справа, заголовком и нижним колонтитулом. Код будет таким:

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

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

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

position:relative;

position:relative;

В таком случае #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 работает только в новых версиях браузеров.

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

Double Margin Bug

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

margin-left:10px;

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

margin-left:10%;

или же так,

margin-right:10px;

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

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

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

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

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

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

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

#sidebar { float: right; }

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

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

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

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

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

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

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

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

#footer { clear: both; }

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

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

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

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

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

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

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

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

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

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

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

Проблемы с float

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

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

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

Подробно описывается CSS свойство float , особенности применения и тонкости использования, приведены виды позиционирования HTML элементов.

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

Терминология

Чтобы не было двусмысленностей, договоримся о терминах.
Float (плавающий элемент) – под float или плавающим элементом в статье подразумевается блочный элемент с установленным CSS свойством float — right или left .
Бокс – под термином бокс подразумевается воображаемый прямоугольник, в который заключен каждый элемент HTML разметки. В соответствии с англоязычной терминологией этот воображаемый прямоугольник будем называть боксом.
Если про бокс не очень понятно, то настоятельно рекомендую более подробно познакомиться с боксами и их свойствами в , т.к. этот термин достаточно часто используется в статье, а главное — это основа всей HTML верстки.
Примечание. Далее в тексте будут встречаться подчеркнутые слова . Таким образом я хочу обратить особе внимание на определенное свойство или качество элемента.

Виды позиционирования HTML элементов

Для ясного представления изложенного надо также знать основные принципы отображения элементов в HTML документах.
Согласно w3.org в WEB разметке используется три схемы размещения элементов в Web документах.
Нормальный поток – в CSS 2.1 нормальный поток Web документа включает элементы, представленные, как блочные боксы, элементы, форматированные, как строчные, и относительное позиционированние блочных и строчных боксов.
Другими словами, нормальный поток включает обычные элементы верстки, у которых не установлены float , равный left/right , или position , равный absolute/fixed .
Float – плавающий элемент вначале размещается в соответствии с правилами размещения в нормальном потоке, потом выводится из этого потока и смещается в своей строке влево или вправо, насколько это возможно.
Четко усвойте следующее важное правило. Так как плавающие элементы выводятся из нормального потока документа, то блочные боксы нормального потока их не видят, но строчные боксы нормального потока их видят и обтекают по одной из сторон, к строчным боксам, в частности, относится обычный текст блочных боксов. А это означает, что если при своем размещении блочные боксы нормального потока не обращают никакого внимания на присутствие плавающих боксов, то содержимое этих боксов (строчные элементы) обтекают такие элементы.
Абсолютное позиционирование – при абсолютном позиционировании бокс полностью удаляется из нормального потока (не влияет на последующие) и размещается относительно позиции своего контейнера, т.е элемента, в котором он размещен.
Немного подробнее о потоках HTML документов вы можете прочитать в статье

Различия между плавающими(float) и позиционированными(position) элементами

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

Вот теперь приступим.

Что такое float?

«Float» — одно из CSS свойств блочного элемента разметки, благодаря которому HTML элемент смещается в крайнее, доступное для размещения, левое или правое положение внутри содержащего этот элемент контейнера. Если в текущей строке контейнера по ширине не хватает места для его размещения, он смещается на следующую строку до тех пор, пока не сможет разместиться. Замечу, что ширина float элемента определяется его содержимым. В зависимости от установленного значения float , строчные элементы могут обтекать такой блочный элемент по одной из его горизонтальных сторон.
Свойство float может принимать следующие значения: none (по умолчанию), left, right и inherit .

Правила отрисовки float элементов

Что происходит, когда браузер встречает элемент, у которого свойство float отлично от none ?
Вначале такой бокс размещается, как обычный элемент, потом извлекается из нормального потока и сдвигается в левую или правую сторону до тех пор, пока не встретит такой же float элемент или границу своего родительского контейнера. В случае, если оставшегося места по горизонтали для элемента не хватает, браузер смещает его на следующую строку своего контейнера.
Поскольку float элемент извлечен из нормального потока, обычные блочные элементы без установленного свойства float не знают о его существовании и размещаются обычным способом, каждый на новой строке. Строчные же элементы разметки «видят» float бокс и обтекают его по одной из сторон в зависимости от значения — left или right .
Для наглядной демонстрации сказанного, приведу такой пример.

Вот что при этом отобразится браузером.

Демонстрация отрисовки float элементов

А теперь разберемся, что получилось. В примере приведено 4 блока, бокс1 и бокс2 отрисовываются браузером по умолчанию, т.е в нормальном потоке, а у внутренних элементов стоит float = left . Чтобы пример получился нагляднее, я добавил блокам фоновый цвет и отступы. Итак, в итоге блоки по умолчанию (1-й и 4-й) отобразились, как обычно, каждый на новой строке и занимают всю ширину(поскольку приведен screenshot разметки, ширина боксов ограничена шириной картинки ). Плавающие же (2-й и 3-й) были извлечены из нормального потока (т.е, 1-й и 4-й боксы их не видят, поэтому «нормальный бокс2» начинается под 1-м с начала строки) и смещены к левой границе контейнера. И хотя нормальные блочные боксы не видят плавающих, но строчный бокс последнего бокса(а это его текст) видит плавающие боксы и обтекает их с правой стороны.
Как видите, все в соответствии с вышеприведенным алгоритмом отрисовки float элементов.

Как используют float

Существует два основных способа использования свойства float .
Рассмотрим их.

Обтекание изображения текстом.

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

Текст обтекает изображение с float:left

Пример верстки страницы с текстом, обтекающим изображение.

CSS
img.alignleft {float: left; margin: 0 10px 10px 0}

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

Макеты с колонками

Свойство Float позволяет два блочных элемента располагать рядом друг с другом, а не начинать с новой строки. Это свойство плавающих элементов очень удобно использовать для создания колонок в документе. Чтобы получить макет с 2 колонками, достаточно задать обтекание(т.е. задать свойcтво float) двум DIVам.
Пример создания 2-х колоночного макета с помощью float.

HTML
‹div id="wrapper"›
‹div id="left-column"›‹div›
‹div id="right-column"›‹/div›
‹/div›

CSS
#left-column {float: left}
#right-column {float: left}

В примере оба внутренних DIVа получили обтекание слева, в итоге имеем 2 колонки. Вы также должны убедиться, что общая ширина двух внутренних столбцов (div) не превышает ширину родительского бокса, иначе вторая колонка перескочит на новую позицию, ниже первой колонки.
Добавив div заголовка над 2-мя колонками и div подвала с использованием свойства clear, вы получите простой и красивый 2-х колоночный макет.

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

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

Нередко при работе с float бывает необходимо, чтобы последующие элементы разметки располагались не рядом с плавающим текущим, а как обычно, на следующей строке, т.е требуется вернуться к размещению элементов в соответствии с нормальным потоком.
Часто этого добиваются использованием свойства clear . Свойство clear принимает значения left, right, both, none (по умолчанию), и inherit . На практике используется первые 3 значения, причем в подавляющем большинстве случаев вы будете использовать clear: both.
Чаще всего, пожалуй, clear используется для того, чтобы div подвала страницы установить ниже ваших 2-х или 3-х плавающих колонок.

Будте внимательны. При использовании после плавающего элемента в новом боксе правила с clear , вы возвращаете этот бокс в нормальный поток, но при этом его свойство margin-top перестает работать. Зачастую эту ситуацию исправляют помещая перед требуемым в нормальном потоке боксом пустой div со свойством clear —

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

Контейнер с float элементами

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

Ранее упоминалось, что плавающие элементы убираются из нормального потока документа. Это приводит к интересной и запутанной проблеме, когда все элементы внутри контейнера плавающие. Обычно такое наблюдается, например, когда в div контейнере заголовка Web страницы находится изображение логотипа со свойством float:left . В заголовке также, как правило, с помощью свойства background-image приводится какое-либо фоновое изображение. В сумме имеем контейнер в нормальном потоке, который содержит плавающий элемент и пустой элемент в нормальном потоке, поскольку изображение выведено фоном. Проблема в том, что div заголовка содержит единственный не пустой элемент – плавающее изображение логотипа, которое выпало из нормального потока. Поэтому браузер считает div заголовка пустым и устанавливает его высоту нулевой. Часто при этом говорят, что контейнер схлопнулся. Существует несколько путей решения этой проблемы. Вы можете явно задать высоту div контейнера не меньше высоты изображения. Это будет хорошо работать в случае с заголовком, как в приведенном примере, но такое по ряду причин не всегда возможно. Иногда добавляют пустой div с установленным свойством clear , чтобы следующие элементы не были плавающими.

HTML
‹div class="clear"›‹/div›

CSS
.clear { clear:both; }

Это удобно, если допускается иметь некоторое пустое пространство после плавающих элементов, т.к. некоторые браузеры для пустых div могут иметь по умолчанию конечные величины для height, margin, padding и.т.д.
Существует также метод использования свойства overflow в родительском элементе. Обычно используют overflow: hidden , но в зависимости от ситуации вы можете использовать overflow: auto или overflow-y вместо использования этого свойства в обоих направлениях. Использование свойства overflow защищает родительский контейнер от схлопывания.

Проблемы с float

Кроме проблемы схлопывающегося контейнера, свойство float имеет еще ряд проблем.
Старые версии Internet Explorer имеют баг двойного отступа(margin ). Если элементы обтекаются в одинаковом направлении и элементам также добавлены margin в том же направлении (left/left или right/right), IE удваивает величину margin . Простым решением является установка свойства display: inline для плавающего элемента, кстати это свойство помогает избавиться и от других багов вредного ишака. Кроме того, вы можете использовать условные комментарии для установки специфических margin для IE или для отдельных версий IE.
Другой проблемой является добавление элементов внутрь плавающего элемента, причем ширина добавляемых элементов больше ширины контейнера. Вы можете, например, добавить изображение внутрь плавающего элемента, при этом ширина изображения больше ширины контейнера. В зависимости от браузера это может привести к тому, что ваш плавающий элемент будет шире, чем предполагалось, или содержимое перекрывает ваше изображение. Убедитесь, что элементы внутри плавающего элемента не превышают ширину плавающего элемента.
Существует также проблема пропадания нижнего отступа (margin-bottom ). Нижний отступ плавающего элемента внутри других плавающих элементов может быть проигнорирован. Решение заключается в использовании padding вместо margin , если такое случается.

Итоги по float

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

• Плавающие элементы выкладываются в нормальный поток документа, затем сдвигаются влево или вправо внутри родительского элемента в соответствии со значением float и удаляются из нормального потока документа.
• Теги с установленными значениями float автоматически становятся блочными элементами.
• Блочные боксы с установленным float располагаются рядом друг с другом, пока для них достаточно места. Если места в контейнере не хватает, они будут отображаться ниже плавающих элементов.
• Ширина бокса с установленным свойством float определяется шириной его содержимого. Рекомендуется при разметке устанавливать ширину float элементам, иначе результат может быть непредсказуем, рекомендация не касается изображений, поскольку для них ширина подразумевается.
• Плавающие и позиционированные элементы различны и ведут себя по разному. Вы не можете использовать свойства float и position в одном элементе.
• Для сброса свойства обтекания для последующих элементов используйте CSS свойство clear .
• Float бокс выводится из основного потока, поэтому блочные элементы в нормальном потоке размещаются так, как будто его нет, но строчные боксы этих элементов освобождают место для плавающего блока.
• Контейнер с исключительно плавающими элементами, имеет нулевую высоту, т.к. float элементы выведены из нормального потока, поэтому родитель считает, что он пустой. Существуют способы борьбы с этим эффектом без дополнительной разметки, ознакомиться с ними можно, например, .
• В отличие от элементов основного потока, вертикальные границы float бокcов не объединяются с границами соседних блоков.
• Найдите наиболее подходящие для себя решения для разрешения проблем корректного отображения float элементов в Internet Explorer.

Надеюсь, изложенное поможет вам прояснить определенную путаницу при использовании CSS свойства float .

Сегодня я расскажу вам о таком параметре предметов в CS:GO как float value или значение float. Это десятичное число до 1. Чем больше это число, тем более поцарапанным будет выглядеть предмет. Почему важно узнать какой float value у предмета перед покупкой?

Вот смотрите, в Маркете Cтим сегодня в продаже висели две по, примерно, одинаковой цене. Но у одной был float 0,54 , а у другой 0,81 .

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

Всего существует пять состояний предметов:

• Закаленное в боях (Battle-Scarred) 1.00 – 0.44
• Поношенное (Well-Worn) 0.44 – 0.37
• Полевые испытания (Field-Tested) 0.37 – 0.15
• Немного поношенное (Minimal Wear) 0.15 – 0.07
• Прямо с завода (Factory new) 0.07 – 0.00

Соответственно, наш AWP | Азимов (Закаленное в боях) с float value 0,57 выглядит похоже на Поношенный .
За хорошим значением float так же гоняются перекупщики, так как хороший показатель этого параметра может повысить цену на некоторые предметы почти в два раза.

Так как же узнать float value в CS:GO?

Если вы хотите узнать флоат у предметов в вашем инвентаре, то вам поможет сайт csgo.exchange . Заходите на сайт, жмете кнопку войти с помощью Стим и ждете пока сайт прогрузит ваш инвентарь (чем больше предметов, тем дольше грузит). Далее просто наводите на оружие и смотрите значение.

Как посмотреть float value на Маркете?

Не так давно я писал обзор плагина . Так вот, еще одна замечательная функция этого плагина – определение float у предмета на Маркете. После установки плагина, рядом с каждым предметом появляется ссылка “View on glws” , по нажатии на которую вы попадете на страницу, где, среди прочего, указан параметр “WEAR_FLOAT” .

Так же флоат по умолчанию включен на сайтах для продажи скинов. Таких как Opskins.com .

Кроме просмотра Float все же советую вам просматривать каждый предмет отдельно в игре или на сайте metjm.net

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