Содержание

Свойство float CSS

float

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

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

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

float. Это должно обеспечить также всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.

Определение и синтаксис CSS-свойства Float

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

float

float

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На изображении выше раздел “Читатели сайта ”.net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойства float в схемах размещения CSS, и она демонстрирует один из способов, который использован в табличном дизайне.

Эффективность использования float в многоколонной верстке была объяснена Douglas Bowman в 2004 в его классической презентации No More Tables:

float

Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в качестве образца. Float были заметно использованы в его ложной перестройке разметки Microsoft.

Синтаксис

Свойство Float может принимать одно из 4 значений: влево (left), вправо(right), без выравнивания (none) и наследованное (inherit). Это объявляется, как показано в коде ниже:

#sidebar { float: left; }

Наиболее часто используемые значения это влево и вправо. Значение none или первоначальное значение float для какого-либо элемента HTML-страницы являются значением по умолчанию. Значение inherit (наследовать), к которому может быть применено почти к каждому свойству CSS, не работает в версиях Internet Explorer, включая 7.

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

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

#sidebar { float: left; width: 350px; }

#sidebar {

float: left;

width: 350px;

}

Особенности плавающих элементов

Ниже приводится список поведение плавающих элементов, согласно спецификации CSS2:

left-floated блок будет смещен влево до его левого края (или границы края, если край отсутствует) касается или края содержания блока, или края другого floated блока

Если размер floated блока превышает доступное горизонтальное пространство, то floated блок будет сдвинут вниз

Non-positioned, non-floated блочные элементы действуют, как плавающие элементы, т.е. находится вне потока документа

Края floated блока не совпадут с краями смежных блоков

Корневой элемент(<html>) не может быть floated

Встроенный элемент, тот который floated, преобразуется в элемент блочного типа

Float на практике

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

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

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

img { float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; }

img {

float: left;

margin: 0 15px 5px 0;

border: solid 1px #bbb;

}

Единственное свойство, которое может добиться такого эффекта работы это свойство float. Другие свойства (margin и border) есть там по эстетическим причинам. Другие элементы в блоке (тэги <p> с текстом в них) не нуждаются ни в каких стилях.

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

This <p> element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.

В приведенном выше примере<p>элемент уровня блока, таким образом он игнорирует floated элемент, охватывающий ширину контейнера (за вычетом padding). Все элементы не floated, блочного типа будут вести себя аналогично.

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

Очистка floats

Проблемы расположения с floats обычно решаются использованием CSS свойства clear, которое позволяет вам “убрать” floated элементы с левой или правой или с обеих сторон.

Давайте рассмотрим пример, который часто встречается — нижний колонтитул (footer) обтекает правую сторону 2-ух клоночной разметки:

Right column also floated left

Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу. Но в Firefox, Опере, Safari и Chrome, вы увидеть, что нижний колонтитул (footer) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое clear свойство, относительно нижнего колонтитула:

Результат показан ниже:

Right column also floated left

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

Свойство clear очистит только floated элементы. Применение clear таково: оба столбца не будут опускать нижний колонтитул, потому что он не floated элемент.

Поэтому пользуйтесь clear на не- floated элементах, и даже иногда на floated элементах, чтобы заставить элементы страницы занять свои отведенные места.

Фиксация Выпадания родителя

Один из самых общих признаков разметки с float, является “выпадение — родителя”. Это продемонстрировано в примере ниже:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Обратите внимание, что основание floated изображения появляется вне своего родителя. Родитель полностью не расширяется, для содержания floated изображение. Это вызвано тем, что мы обсуждали ранее: floated элемент вне естественного потока документа, хотя все элементы блока отображаются, но floated элемента там как бы нет. Это не ошибка CSS, всё в соответствии со спецификациями CSS. Все браузеры делают то же в этом примере. Нужно сказать, что, в этом примере, добавляя ширину контейнера можно предотвратить проблему в IE, но нужно рештиь проблему и для Firefox, Opera, Safari, или Chrome.

Решение 1:Float для контейнера

Самый простой способ решения этой проблемы является float для родительского элемента:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

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

Решение 2: Добавление Дополнительной Разметки

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

<div> <img src="//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg" alt="" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> <div></div> </div>

<div>

<img src="//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg" alt="" />

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>

<div></div>

</div>

И в результате CSS применяется к новым элементам:

.clearfix { clear: both; }

.clearfix {

clear: both;

}

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

Решение 3: Псевдо-элемент after

:after псевдо-элемент добавляет некий элемент к выполненной странице HTML. Этот метод использовался весьма широко, чтобы решить проблемы float-clearing. Вот как выглядит CSS:

float

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

Класс CSS “clearfix” применяем к любому контейнеру, который имеет дочерние элементы с float и не расширяется, чтобы включить их.

Но этот метод не работает для Internet Explorer до7 версии, поэтому для IE нужно применить один из следующих вариантов:

.clearfix { display: inline-block; } .clearfix { zoom: 1; }

.clearfix {

display: inline-block;

}

 

.clearfix {

zoom: 1;

}

В зависимости от типа проблемы вы имеете дело с одним из двух решений, которые разрешат эту проблему в Internet Explorer. Следует отметить, что свойство zoom не является стандартом свойств Microsoft и поэтому ваш CSS станет не валидным.

Так, как псевдо — элемент :after не работает в IE6/7, получаем немного раздутый и мудрёный код, и требуется дополнительный недопустимый только для IE стиль, поэтому это решение не является лучшим способом, но вероятно, лучшее, из тех, что мы рассматривали до сих пор.

Решение 4: Свойство Overflow

Безусловно, лучший и самый простой способ решить проблему с выпадением родителя добавить overflow: hidden или overflow: auto к родительскому элементу. Это ясно, легко поддерживается, работает почти во всех браузерах и не добавляет лишней разметки.

Заметьте, что я сказал «почти» во всех браузерах. Это объясняется тем, что он не работает в IE6. Но, во многих случаях, у родительского контейнера будет установленная ширина, которая устраняет проблему в IE6. Если у родительского контейнера нет ширины, Вы можете добавить IE6-единственный стиль со следующим кодом:

// This fix is for IE6 only .clearfix { height: 1%; overflow: visible; }

// This fix is for IE6 only

.clearfix {

height: 1%;

overflow: visible;

}

В IE6, свойство height неправильно рассматривать как min-height, таким образом, это вынуждает контейнер включить свои дочерние элементы. Свойство Overflow затем устанавливается обратно в “visible”, чтобы гарантировать, что содержимое не скрыто или пролистано.

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

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

Связанные float ошибки в Internet Explorer

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

Изменение cвойства float при помощи JavaScript

Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к стилю объекта, преобразовывая намеченное свойство CSS в «Camel case” Например, свойство CSS “margin-left” становится marginLeft, свойство background-color становится BackgroundColor, и так далее. Но со свойством float, всё по другому, потому что слово float уже зарезервированно в JavaScript. Поэтому следующее будет неправильным:

myDiv.style.float = "left";

myDiv.style.float = "left";

Вместо этого, вы должны использовать одно из следующих действий:

// For Internet Explorer myDiv.style.styleFloat = "left"; // For all other browsers myDiv.style.cssFloat = "left";

// For Internet Explorer

myDiv.style.styleFloat = "left";

 

// For all other browsers

myDiv.style.cssFloat = "left";

Практическое использование Float

Floats могут быть использованы для решения целого ряда задач в CSS разметке. Некоторые примеры описаны здесь.

2-колонки, фиксированной ширины

Roger Johansson в 456 Berea Stree излагает 8 учебных шагов для создания простого кроссбраузерного, горизонтального центрирования 2-столбцов. Свойство float является составной частью расположения этой разметки.

“Разметка состоит из заголовка, горизонтальной навигационной панели, столбца основного содержания, бокового и нижнего колонтитула. Всё это также горизонтально по центру в окне браузера. Довольно типичный макет и его вовсе не трудно создать с помощью CSS после того, как вы знаете, как бороться с неизбежными ошибками Internet Explorer»

float

Простой макет CSS на 2 столбца

3 столбца, Схема размещения Равной высоты

Petr Stanicek с pixy.cz демонстрирует разметку из 3 столбцов кроссбраузерна, опять-таки используя float:

“Никаких таблиц, никакого абсолютного позиционирования (никакого позиционирования вообще), никакой нудной работы (!),одинаковая высота всех столбцов Левая и правая колонки фиксированной ширины (150px), средняя — тянется.»

float

Схема размещения на 3 столбца с CSS

Floated изображение с заголовоком.

Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design описывает, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.

float

Плавающие Изображение и Заголовок

Горизонтальная навигация с неупорядоченными списками

Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness, в котором теги <li>, удерживающие кнопки навигации, используют float: left:

float

Как создать меню CSS с помощью спрайт изображения

Чтобы продемонстрировать важность свойства float в этом примере, вот, скриншот того же самого изображения после использования firebug для удаления the float: left:

float

Grid-Based фото галереи

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

float

Страница продуктов Foremost Canada’s (см. изображение выше) отображает свои продукты в формате сетки, рядом с боковой колонкой. Фотографии отображаются в виде неупорядоченного списка со свойством float, для всех <li> элементов установлено float: left. Это работает лучше, чем на табличная сетка, поскольку число фотографий в галерее может измениться, и разметка не будет затронута.

float

На Paragon Furniture’s futons page (см. изображение выше) другой пример страницы продуктов, где используется неупорядоченный список с floated тегами <li>.

float

На iStockphoto’s search results page (см. изображение выше) таже сетка, структурированных фотографий, здесь фотографии содержат float:left <div> теги, а не <li> теги.

Выравнивание <input> поля с кнопкой

Моделирование по умолчанию элементов формы для различных браузеров может быть проблематичным. Часто в одном поле формы, таком как форма поиска, необходимо поставить <input> элемент рядом с кнопкой “отправления”.

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

Заключение

Как было упомянуто в начале, без свойства float, табличное расположение будет, в худшем случае, невозможно, а, в лучшем случае неудобно в сопровождении. Float будет и впредь занимать видное место в макетах CSS, даже CSS3 начинает завоевывать известность – несмотря на то, что были дискуссии о разметке без использования floats.

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

Автор: Louis Lazaris

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://www.smashingmagazine.com

E-mail: [email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

float

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее float

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

float | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 3.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам (за исключением абсолютно позиционированных)
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

float: left | right | none | inherit

Значения

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

Пример

HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .layer1 {
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin-right: 20px; /* Отступ справа */
    width: 40%; /* Ширина блока */
   }
  </style>
 </head> 
 <body> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>
 </body>
</html>

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

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

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

[window.]document.getElementById("elementID").style.styleFloat

[window.]document.getElementById("elementID").style.cssFloat

Браузеры

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

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

float - плавающий блок, обтекание текстом картинки

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

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

Описание

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

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

css float right

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

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

обтекание текстом css

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


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  p { width: 250px; }
      img { float: left; }
    </style>
  </head>
  <body>
    <p>
    <img src="css.png">
    С помощью CSS свойства float картинка была сделана плавающей с левой стороны. 
    Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
    по правой и нижней стороне.</p>
  </body>
</html>
Попробовать »

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

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

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

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

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

Значение по умолчанию: none
Применяется: ко всем элементам, кроме тех, которые имеют абсолютное или фиксированное позиционирование
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.cssFloat="left"

Синтаксис

float: none|left|right|inherit;

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

Значение Описание
left Элемент плавает слева.
right Элемент плавает справа.
none Элемент не является плавающим и будет отображаться точно там, где он расположен.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Элемент, значение которого вы меняете.

Измените значение. Обратите внимание на результат расположения элементов.

div#myDIV {
width: 100px;
background-color: red;
float: none;
}

Свойство float | CSS справочник

CSS свойства

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

CSS свойство float определяет будет ли элемент плавающим. Если элемент имеет абсолютное позиционирование (position : absolute;), то элементы будут игнорировать значения свойства float.

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

CSS синтаксис:

float:"none | left | right | initial | inherit";

JavaScript синтаксис:

object.style.cssFloat = "right"

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

ЗначениеОписание
noneЭлемент не является плавающим и отображается там, где он расположен. Это значение по умолчанию.
leftЭлемент становится плавающим и смещается по левому краю (остальные элементы обтекают его по правой стороне).
rightЭлемент становится плавающим и смещается по правому краю (остальные элементы обтекают его по левой стороне).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство float.</title>
<style> 
div {
width  : 60%; /* задаём ширину блока */
text-align  : justify; /* задаём выравнивание текста по ширине */
}
img.test1 {
width  : 100px; /* задаём ширину изображения */
height  : 100px; /* задаём высоту изображения */
float : left; /* Изображение становится плавающим элементом, смещенным влево */
}
img.test2 {
width  : 150px; /* задаём ширину изображения */
height  : 150px; /* задаём высоту изображения */
float : right; /* Изображение становится плавающим элементом, смещенным вправо */
}
</style>
</head>
	<body>
		<div>
			<img src = "nich.jpg" alt = "nich" class = "test1">
			<img src = "nich.jpg" alt = "nich" class = "test2">
			<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
			<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
			<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		</div>
	</body>
</html>
Пример использования свойства float.CSS свойства

float | CSS | WebReference

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

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам (за исключением абсолютно позиционированных)
АнимируетсяНет

Синтаксис ?

float: left | right | none

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

Песочница

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .pull-left {
    float: left; /* Обтекание блока по правому краю */
    padding-right: 10px;
   }
  </style>
 </head> 
 <body> 
  <div>     
   <img src="image/figure.jpg" alt="">
  </div>
 <p>Бихевиоризм, как бы это ни казалось парадоксальным, 
  просветляет сублимированный стимул, так, например, 
  Ричард Бендлер для построения эффективных состояний 
  использовал изменение субмодальностей.</p>
 </body>
</html>

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

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

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

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

Объект.style.cssFloat

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Число одинарной точности — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 14 марта 2016; проверки требуют 15 правок. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 14 марта 2016; проверки требуют 15 правок.

Число́ одина́рной то́чности (англ. single precision, single) — широко распространенный компьютерный формат представления вещественных чисел, занимающий в памяти 32 бита (4 байта). Как правило, под ним понимают формат числа с плавающей запятой стандарта IEEE 754.

Числа одинарной точности с плавающей запятой обеспечивают относительную точность 7-8 десятичных цифр в диапазоне от 10−38{\displaystyle 10^{-38}} до примерно 1038{\displaystyle 10^{38}}.

В современных компьютерах вычисления с числами с плавающей запятой поддерживаются аппаратным сопроцессором (FPU — англ. floating point unit). Однако во многих вычислительных архитектурах нет аппаратной поддержки чисел с плавающей запятой и тогда работа с ними осуществляется программно.

Для вычисления показателя степени из восьмиразрядного поля порядка вычитается смещение порядка равное 12710 = 7F16 = 011111112 (то есть, 011111002 - 011111112 = 12410 - 12710 = -310). Так как в нормализованной двоичной мантиссе целая часть всегда равна единице, то в поле мантиссы записывается только её дробная часть. Для вычисления мантиссы к единице добавляется дробная часть мантиссы из 23-х разрядного поля дробной части мантиссы 1,010000000000000000000002. Число равно произведению мантиссы со знаком на двойку в степени порядка = 1,012*210-310 = 1012*210-510 = 510*210-510 = 0,1562510.

union {
    float    fl;
    uint32_t dw;
} f;
int s = ( f.dw >> 31 ) ? -1 : 1;   /* Знак */
int e = ( f.dw >> 23 ) & 0xFF;     /* Порядок */
int m =                            /* Мантисса */
  e ?
    ( f.dw & 0x7FFFFF ) | 0x800000 :
    ( f.dw & 0x7FFFFF ) << 1;

Результирующая формула расчёта (число одинарной точности) будет s * (m * 2 ^ -23) * (2 ^(e-127)).

Примеры использования[править | править код]

Python[править | править код]

Конвертирует целочисленное представление числа с одинарной точностью (в виде четырёх байт, младшие вначале) во встроенный тип действительных чисел Python'а.

def dw2float(dw_array):
    assert (len(dw_array) == 4)
    dw = int.from_bytes(dw_array, byteorder='little',signed=False)
    s = -1 if (dw >> 31) == 1 \
        else 1                                    # Знак
    e = ( dw >> 23 ) & 0xFF;                      # Порядок
    m = ((dw & 0x7FFFFF ) | 0x800000) if e != 0 \
        else ((dw & 0x7FFFFF ) << 1)              # Мантисса
    m1 = m*(2**(-23))                             # Мантисса в float
    return s*m1*(2**(e-127))

0.1562510 в формате float записывается как 3E20000016, что эквивалентно четырём байтам: [0x00,0x00,0x20,0x3E]. Вывод программы:

 
In[1]: dw2float([0x00,0x00,0x20,0x3E])
Out[1]: 0.15625
In[2]: dw2float([0x00,0x00,0x20,0xBE])
Out[2]: -0.15625

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

3f80 0000 = 1
c000 0000 = −2

7f7f ffff ≈ 3.4028234 × 1038  (максимальное одинарной точности)
0000 0001 = 2-149 ≈ 1.401298464 × 10−45 (Минимальное положительное число одинарной точности — денормализованное)
0080 0000 = 2-126 ≈ 1.175494351 × 10−38 (Минимальное нормализованное положительное число одинарной точности)

0000 0000 = 0
8000 0000 = −0

7f80 0000 = infinity
ff80 0000 = −infinity
				
3eaa aaab ≈ 1/3

По умолчанию, 1/3 округляется вверх, в отличие от чисел двойной точности.

float.h — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 6 июня 2016; проверки требуют 2 правки. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 6 июня 2016; проверки требуют 2 правки.

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

Макросы, описанные в секции 5.2.4.2.2 стандарта ISO 9899:1999:

  • FLT_ROUNDS — способ округления при сложении чисел с плавающей точкой:
    • −1 — не определено;
    • 0 — в сторону нуля;
    • 1 — в сторону ближайшего числа;
    • 2 — к положительной бесконечности;
    • 3 — к отрицательной бесконечности;
    • другие значения означают, что отдаётся преимущество машинно-зависимому способу округления.
  • FLT_EVAL_METHOD — определяет форматы результатов вычислений, включающий типы с плавающей точкой:
    • −1 — не определено;
    • 0 — привести результаты всех операций и константы лишь с точностью до типа;
    • 1 — привести результаты операций и константы типов float и double к типу double;
    • 2 — привести результаты операций и констант к типу long double;
    • другие значения означают, что отдаётся преимущество машинно-зависимому способу округления.
  • FLT_RADIX — основание для представления порядка, например: 2, 16.
  • FLT_MANT_DIG, DBL_MANT_DIG, LDBL_MANT_DIG — количество цифр по основанию FLT_RADIX в мантиссе.
  • DECIMAL_DIG — (хотя бы 10).
  • FLT_DIG, DBL_DIG, LDBL_DIG — количество верных десятичных цифр.
  • FLT_MIN_EXP, DBL_MIN_EXP, LDBL_MIN_EXP.
  • FLT_MIN_10_EXP, DBL_MIN_10_EXP, LDBL_MIN_10_EXP (хотя бы -37).
  • FLT_MAX_EXP, DBL_MAX_EXP, LDBL_MAX_EXP.
  • FLT_MAX_10_EXP, DBL_MAX_10_EXP, LDBL_MAX_10_EXP (хотя бы +37).
  • FLT_MAX, DBL_MAX, LDBL_MAX — максимальное число с плавающей точкой.
  • FLT_EPSILON, DBL_EPSILON, LDBL_EPSILON — минимальное положительное х такое, что 1.0 + x != 1.0.
  • FLT_MIN, DBL_MIN, LDBL_MIN — минимальное нормализованное число с плавающей точкой.



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *