float: left

float

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

Summary

CSS-свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.

Плавающий элемент — это любой элемент со свойством float отличным от none .

Начальное значение	none
Применяется к	все элементы, но не будет эффекта, если display: none
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Поскольку float подразумевает использование блочной модели, это свойство изменяет вычисляемые значения display в следующих случаях:

Specified value	Computed value
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex , float не оказывает влияния на такие элементы
inline-flex	inline-flex , float не оказывает влияния на такие элементы
other	не меняются

**Примечание:**If you’re referring to this property from JavaScript as a member of the element.style object, you must spell it as cssFloat . Also note that Internet Explorer versions 8 and older spelled this styleFloat . This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that «float» is a reserved word in JavaScript, as with the need to escape «class» as «className» and escape ‘s «for» as «htmlFor»).

Syntax

float: left; float: right; float: none; float: inherit; 

Values

Is a keyword indicating that the element must float on the left side of its containing block.

Is a keyword indicating that the element must float on the right side of its containing block.

Is a keyword indicating that the element must not float.

Formal syntax

float =
block-start | (en-US)
block-end | (en-US)
inline-start | (en-US)
inline-end | (en-US)
snap-block | (en-US)
| (en-US)
snap-inline | (en-US)
| (en-US)
left | (en-US)
right | (en-US)
top | (en-US)
bottom | (en-US)
none | (en-US)
footnote

=
snap-block( , [ (en-US) start | (en-US) end | (en-US) near ] (en-US) ? (en-US) )

=
snap-inline( , [ (en-US) left | (en-US) right | (en-US) near ] (en-US) ? (en-US) )

Examples

style type="text/css"> div  border: solid red; max-width: 70ex; > h4  float: left; margin: 0; > style> div> h4>HELLO!h4> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. div> 

HELLO!

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.

In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second «left» red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.

Clearing floats

In the example above, the floated elements are shorter vertically than the block of text they’re floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read «Lorem ipsum dolor sit amet,» and was followed by another heading of the same style as the «Floats Example» heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we’d need to clear the floats.

The simplest way to clear the floats in this example is to add the clear property to the new heading we want to be sure is aligned left:

h2.secondHeading  clear: both; > 

However, this method only works if there are no other elements within the same block formatting context (en-US) that we do want the heading to continue to appear next to horizontally. If our H2 has siblings which are a sidebars floated to the left and right, using clear will force it to appear below both sidebars, which is probably not what we want.

If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats’ container. Referring to the example above again, it appears that all three red boxes are within a P element. We can set the overflow property on that P to hidden or auto to cause it to expand to contain them, but not allow them to drop out the bottom of it:

p.withRedBoxes  overflow: hidden; height: auto; > 

Примечание: Setting overflow to scroll will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we’re setting height to auto even though that’s the default to indicate that the container should grow to accommodate its content.

Specifications

Specification	Status	Comment
CSS Box Model Определение ‘float’ в этой спецификации.	Кандидат в рекомендации	Lots of new values, not all clearly defined yet. Any differences in behavior unrelated to new features are expected to be unintentional; please report.
CSS Level 2 (Revision 1) Определение ‘float’ в этой спецификации.	Рекомендация	No change.
CSS Level 1 Определение ‘float’ в этой спецификации.	Рекомендация	Initial definition.

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Описание float

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

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

Пример 1. Исходное положение картинки с текстом

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

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

Рис. 1. Исходное расположение картинки с текстом

Значение left у свойства float выравнивает картинку по левому краю браузера, а все остальные элементы, вроде текста, обтекают её по правой стороне (пример 2).

.fig

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

Рис. 2. Обтекание картинки текстом справа

Значение right у свойства float располагает картинку по правому краю браузера, а все остальные элементы, вроде текста, обтекают её по левой стороне (пример 3). Текст при этом плотно прижимается к картинке, поэтому имеет смысл дополнить стиль свойством margin , которое добавит пространство между изображением и текстом.

.fig

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

Рис. 3. Обтекание картинки текстом слева

Особенности float

Элемент с float и со значением left или right превращается в блочный, к нему автоматически добавляется свойство display со значением block . При этом ширина элемента равна его содержимому плюс значения свойств padding , border и margin . В этом отношении элемент ведёт себя как строчно-блочный. В примере 4 показано, как выглядит ширина элемента.

Пример 4. Ширина элемента с float

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

Элементы с float располагаются друг с другом по горизонтали. При значении left это происходит слева направо, а при значении right — справа налево. В примере 5 показан порядок элементов, в зависимости от используемого значения float .

Пример 5. Порядок элементов

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

Если близлежащему к обтекаемому элементу не хватает места по ширине, то он переносится на следующую строку. Это хорошо заметно на блоках, общая ширина которых превышает 100%. В примере 6 добавлено два блока, для которых задано свойство float со значением left , что обеспечивает их расположение рядом друг с другом по горизонтали. Ширина первого блока — 30%, второго — 70%. При этом к первому блоку справа добавляется линия толщиной два пикселя, из-за чего суммарная ширина блоков превышает ширину окна браузера (30% + 2px + 70%).

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

Рис. 6. Перенос блока на другую строку

Источник

float

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

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

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

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

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

     p < width: 250px; >img  
  С помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в 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	Указывает, что значение наследуется от родительского элемента.

Источник