Доступно про float: left и как равномерно разместить блоки div на CSS
Ранее разметка страниц осуществлялась с помощью таблиц.
Роль свойства float возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right, left, но не center.
Ранее разметка страниц осуществлялась с помощью таблиц.
Роль свойства float возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right, left, но не center.
С помощью свойства display: block; или display: inline; мы преобразуем один тип прямоугольника в другой. Например, список UL, который имеет ряд блоков LI, можно расположить горизонтально:
При использовании свойства float прямоугольник является блочным, но с характерной особенностью: его ширина не будет распространяться на всё содержимое. Например, заголовок h3 выглядит как:
это HEADER h3
Если ему задать свойство display: inline;, то мы увидим, что изменилась не только ширина, но и расстояние над и под элементом:
Но если я хочу разместить элемент справа и добавлю на этот раз text-align:right;, то мы получим:
это HEADER h3
И совсем иначе, если float: right;. Обратите внимание, что расстояние над и под элементом остались неизменными:
это HEADER h3
А как поведут себя элементы, находящиеся рядом с заголовком?
Верхний текст остаётся неизменным, поскольку плавающий элемент не может располагаться выше строки, в которой он создан.
это HEADER h3
А вот красный текст находится под заголовком и он будет его обтекать, не имея при этом никаких дополнительных стилей. И только высота h3 будет преодолена, страница вернётся к естественному порядку.
А Б В Г Несколько плавающих элементов будут соблюдать последовательность своего расположения.
АБВГтекст.
А выравнивание производится по самому нижнему краю тех букв, которые находятся на одной стороне.
А Б В Г Если мы ходим, чтобы обтекание элемента было прекращено с определённого момента (отсюда), применяется свойство clear. Его мы можем добавить в пустой тег
Для того, чтобы равномерно разместить несколько блочных прямоугольников, зададим им одинаковую ширину.
Блок 1
Блок 2
Блок 3
Блок 4
А где расстояние между блоками? Если задать отступы margin и padding, то из-за того, что плавающим элементам не будет хватать пространства, они будут смещаться вниз.
Блок 1
Блок 2
Блок 3
Блок 4
Блок 1
Блок 2
Блок 3
Блок 4
Табличная вёрстка очень удобна и понятна, наверное, поэтому появился её аналог display: table;. Та же форма получается при меньшем использовании кода.
где border-spacing определяет горизонтальное и вертикальное расстояние между границами ячеек.
Теперь видно каким образом строится галерея изображений. Код картинок, надеюсь, никто не позабыл.
Блок 1
Блок 2
Блок 3
Блок 4
И последнее, что хочется показать — ситуацию, когда нужно достичь обтекания изображения с двух сторон. Собственно говоря картинка соответствует моему настроению, когда мне всё же удалось добиться этого эффекта.
#imagen-center равен #texto-L:before, #texto-R:before и составляет половину ширины изображения плюс 10px. #texto-R:before равна высоте изображения + 10px.
Вячеслав Умница! Спасибо! 🙂 Анонимный Спасибо! Очень сильно выручил 🙂 NMitra Рада помочь 🙂 Анонимный Огромное спасибо. Выручили просто нереально))) Александр Отлично, спс! NMitra На здоровье! Анонимный в мемориз Дмитрий Копий Респект и уважуха автору! NMitra Приятно слышать))) Ярослав Легко читается, хорошо воспринимается. Сейчас как раз пытаюсь выстроить блоки в ряд. Спасибо за Ваш труд! NMitra Благодарю за рецензию! Игорь Вертепа Прочитал Вашь пост и нашел решение своего вопроса, хотел написать автору: «Красавчик» — чем похвалить. Но в комментах вовремя заметил, что пост писала девушка, что в двойне приятно. Очень славно, особенно с обтеканием картинки по центру, нам преподаватель, говорил, что такого нельзя сделать средствами CSS. Конечно он приувеличил и мы видим это решение собственными глазами. Респет, уважаю таких девченок, которые что-то из себя представляют, а не надеются, что их красота спасет мир. 😉 Игорь Вертепа Жаль конечно эти решения не тянут для старых ИЕ, а то им цены бы не было. Но Все равно респект. NMitra Спасибо, Игорь, приятно слышать :))) Анонимный добрый день. Подскажите пожалуйста, как реализовать вывод изображений как на этой странице bersoantik.com/catalog/ Нужно чтобы все изображения выравнивались только по столбцам — по 3 в строке, но в строке чтобы если одно меньше, одно больше по высоте, то отступы между изображениями по вертикали были одинаковые, то есть как-будто какой-то небольшой хаос. Спасибо за помощь. NMitra Добрый день. Посмотрите тут http://shpargalkablog.ru/2012/02/css-kolonki.html
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Try it
A floating element is one where the computed value of float is not none .
As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:
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
inline-flex
flex
inline-grid
grid
other
unchanged
Note: If you’re referring to this property from JavaScript as a member of the HTMLElement.style object, modern browsers support float , but in older browsers you have to spell it as cssFloat . This was an exception to the rule, that the name of the DOM member is the camel-case name of the dash-separated CSS name (because «float» is a reserved word in JavaScript, as seen in the need to escape «class» as «className» and escape ‘s «for» as «htmlFor»).
The float property is specified as a single keyword, chosen from the list of values below.
Values
The element must float on the left side of its containing block.
The element must float on the right side of its containing block.
The element must not float.
The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts.
The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.
Formal definition
Initial value
none
Applies to
all elements, but has no effect if the value of display is none .
Inherited
no
Computed value
as specified
Animation type
discrete
Formal syntax
float = block-start | block-end | inline-start | inline-end | snap-block | | snap-inline | | left | right | top | bottom | none | footnote
= snap-block( , [ start | end | near ]? )
= snap-inline( , [ left | right | near ]? )
Examples
How floated elements are positioned
As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
In this example, there are three colored squares. Two are floated left, and one is floated right. Note that the second «left» 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.
A floated element is at least as tall as its tallest nested floated children. We gave the parent width: 100% and floated it to ensure it is tall enough to encompass its floated children, and to make sure it takes up the width of the parent so we don’t have to clear its adjacent sibling.
HTML
section>divclass="left">1div>divclass="left">2div>divclass="right">3div>p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus congue. p>section>
Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See clear for examples.
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Feb 23, 2023 by MDN contributors.
