Как отменить float left в css

clear: none | left | right | both

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

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

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

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

Объект.style.clear

Примечание

В браузере Internet Explorer до версии 6 включительно наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear , соприкасающиеся с плавающими элементами (у которых задано свойство float ), могут исчезать.

В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear .

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

Спецификация	Статус
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

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

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

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

Браузеры

4

8

12

1

3.5

1

1

1

1

6

1

Браузеры

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

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

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

См. также

• float в CSS
• Очистка float
• Подробнее о позиционировании
• Примеры использования float

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Float

Первоначально используемое для «обтекания» картинок текстом, свойство float стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.

Предварительные требования:	Базовое знакомство с HTML (изучите Введение в HTML), а также идея о том как работает CSS (изучите Введение в CSS.)
Задача:	Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.

Общие сведения о float

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

Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как drop-caps (буквица).

Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как устаревшей техникой (en-US) .

В этой статье мы сконцентрируемся только на надлежащем использовании floats.

Простой пример float

Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый index.html файл на вашем компьютере, заполнив его простым шаблоном HTML, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.

Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:

h1>Simple float exampleh1> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. p> p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

А теперь примените следующий CSS для вашего HTML (используя элемент или на отдельный файл .css — на ваше усмотрение):

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box :

.box  float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:

h1>Simple float exampleh1> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на right и замените margin-right на margin-left в последнем наборе правил, чтобы увидеть каков результат.

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

Добавьте класс special к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.

.special  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > 

Чтобы эффект был лучше виден, измените margin-right обтекаемого объекта на margin , так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.

h1>Simple float exampleh1> div class="box">Floatdiv> p class="special"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > .special  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > 

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

Очистка обтекания

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

Добавьте класс cleared ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:

.cleared  clear: left; > 

h1>Simple float exampleh1> div class="box">Floatdiv> p class="special"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > .special  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > .cleared  clear: left; > 

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

• left : очищает объекты, обтекаемые слева.
• right : очищает объекты, обтекаемые справа.
• both : очищает любые обтекаемые объекты, слева или справа.

Очистка блоков обёрнутых вокруг обтекаемых элементов

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

div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> 

В вашем CSS добавьте следующее правило для класса .wrapper и обновите страницу:

.wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > 

В добавок удалите класс .cleared :

.cleared  clear: left; > 

Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.

h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

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

Clearfix hack

Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.

Добавьте следующий CSS в наш пример:

.wrapper::after  content: ""; clear: both; display: block; > 

Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как ниже объекта и установили clear: both .

h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > .wrapper::after  content: ""; clear: both; display: block; > 

Использование overflow

Альтернативный метод — это задать свойство overflow для обёртки (wrapper) на значение отличное от visible .

Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте overflow: auto к правилу для обёртки. Блок снова должен быть очищен.

.wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; overflow: auto; > 

h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; overflow: auto; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Этот пример работает путём создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.

display: flow-root

Современный способ решения этой проблемы — это использование значения flow-root свойства display . Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите overflow: auto из вашего правила .wrapper и добавьте display: flow-root . Если предположить, что у вас поддерживающий браузер, блок будет очищаться.

.wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; display: flow-root; > 

h1>Simple float exampleh1> div class="wrapper"> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. p> div> p class="cleared"> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> 

body  width: 90%; max-width: 900px; margin: 0 auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; > .wrapper  background-color: rgb(79, 185, 227); padding: 10px; color: #fff; display: flow-root; > .box  float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

Проверьте свои навыки!

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

Заключение

Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об устаревших методах макета (en-US) устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.

В этом модуле

• Введение в CSS макет
• Нормальный поток
• Flexbox
• Grid
• Floats
• Позиционирование
• Макет с несколькими столбцами
• Отзывчивый дизайн
• Руководство по медиавыражениям для новичков (en-US)
• Устаревшие методы макета (en-US)
• Поддержка старых браузеров (en-US)
• Базовая оценка понимания макета

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как задать блокам с float: left высоту контейнера

Есть некие блоки обернутые в контейнер. Имеют свойство float: left . Нужно, чтобы они были высотой с контейнер (height: 100% — не работает). Clearfix задан. Высота контейнера не задана(по самому высокому блоку внутри выставляется автоматически). Не используя flex и table

Отслеживать
задан 14 янв 2018 в 13:48
244 2 2 серебряных знака 12 12 бронзовых знаков
при чем тут float: left и высота контейнера?
14 янв 2018 в 13:56
Блоки стоят в ряд
14 янв 2018 в 14:01
выложи сюда код, чтобы можно было иметье представление, что ты там творишь.
14 янв 2018 в 14:12
Прийду домой, выложу. Спасибо за понимание.
14 янв 2018 в 14:20

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Свойство height, указанное в %, работает только если у родительского блока указана высота, либо если элементы абсолютно позиционированы.

Отслеживать
ответ дан 14 янв 2018 в 16:23
Alexander Demchik Alexander Demchik
136 1 1 серебряный знак 5 5 бронзовых знаков

Используйте flex. Он умеет делать все тоже самое что и флоат( в большинстве случаев) и даже больше. Да и проблем с ним меньше. Поддержка хорошая, дерзайте. Второй(более старый вариант) можно попробовать использовать display: table, table-row, table-cell. Но первый вариант лучше.

Отслеживать
ответ дан 14 янв 2018 в 14:01
8,059 5 5 золотых знаков 33 33 серебряных знака 52 52 бронзовых знака

Я знаю про flexbox. Просто он не везде поддерживается. А табличный устарел. Если есть другой способ, подскажите.

14 янв 2018 в 14:05
@Letton, например? caniuse.com/#search=flex, мне кажется это хороший показатель
14 янв 2018 в 14:07
@Letton, caniuse.com/#search=table (2 вариант)
14 янв 2018 в 14:08
Спасибо, что подсказали про table
14 янв 2018 в 16:30

Node_pro, у IE 9 и ниже будут проблемы с flex. Но специально для них можно сделать это таблицой. Ещё раз спасибо!

14 янв 2018 в 16:34

Что вам мешало использовать height: inherit; ?

main < height: 100px; >div

Отслеживать
ответ дан 14 янв 2018 в 19:56
Alexey Giryayev Alexey Giryayev
4,778 1 1 золотой знак 17 17 серебряных знаков 41 41 бронзовый знак
Добавь текст в блоки
16 янв 2018 в 19:54

@Letton о том, что высота контейнера не задана вроде как позже появилось. А про разную высоту блока не уточняется. Случаи бывают разные. При динамически обновляемом контенте вам нужен либо JS, либо все же flexbox, поддержка которого уже добралась к 97%. Поддерживая старые браузеры, вы сами тормозите внедрения новшеств, облегчающих вам жизнь.

16 янв 2018 в 22:35

• html
• css
• css3
• html5
• float