Как удержать родительские элементы плавающих элементов от коллапса?
Хотя такие элементы, как <div>, обычно растут, чтобы соответствовать своему содержимому, использование свойства float может вызвать поразительную проблему для новичков в CSS: Если плавающие элементы имеют не плавающие родительские элементы, родительский элемент будет свернут.
Например:
<div>
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
</div>Родительский div в этом примере будет не расширяться, чтобы содержать своих плавающих дочерних элементов - он будет иметь height: 0.
Как решить эту проблему?
Я хотел бы создать здесь исчерпывающий список решений. Если вам известно о проблемах кросс-браузерной совместимости, укажите на них.
Решение 1
Плавайте родительский объект.
<div style = "float: left;">
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
</div>Плюсы: семантический код.
Минусы: Возможно, вы не всегда хотите, чтобы родительский объект был плавающим. Даже если вы это сделаете, вы отпустите родителя родителей и так далее? Должны ли вы перемещать каждый элемент-предок?
Решение 2
Дайте родителю явную высоту.
<div style = "height: 300px;">
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
</div>Плюсы: семантический код.
Минусы: не гибкий - при изменении содержимого или размера браузера макет сломается.
Решение 3
Добавьте элемент-разделитель внутри родительского элемента, например:
<div>
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
<div class = "spacer" style = "clear: both;"></div>
</div>Плюсы: Прямой код.
Минусы: не семантический; разделитель div существует только как макет.
Решение 4
Установите родительский элемент на overflow: auto.
<div style = "overflow: auto;">
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
</div>Плюсы: не требует дополнительного div.
Минусы: Похоже на взлом - это не заявленная цель свойства overflow.
Комментарии? Другие предложения?
Совет. Решение 4 работает для Firefox 3+, но не для IE7. Для этого вам понадобится решение 3
Спасибо за информацию, я выбрал 3, не смог заставить работать первое решение, возможно, у меня был родительский родитель без поплавка, как вы предложили :)
Другой вариант - размещение родителя. например давая ему 'position: absolute' или 'position: fixed'
как видно здесь stackoverflow.com/questions/11830433/…overflow:auto, похоже, имеет некоторые проблемы, когда он добавляет полосы прокрутки там, где их не должно быть, поэтому вместо этого используйте overflow:hidden
@ Натан Лонг, не могли бы вы отметить мой ответ как правильный? Похоже, было принято иначе.
Что касается свойства overflow, вас может заинтересовать мой ответ на следующий вопрос: Почему overflow: hidden имеет неожиданный побочный эффект в виде увеличения высоты для размещения плавающих элементов?
+1 для overflow: auto. Это единственное, что у меня сработало.
перелив: авто; было именно то, что я искал в данный момент. Вы сэкономили мне время, и за это получаете +1 от меня отличные решения. Работает даже в IE 7+
Я не понимаю, почему браузеры отображают родителей с нулевой высотой с дочерними поплавками. Я могу понять, позиционируются ли дочерние элементы как абсолютные или фиксированные, но в этом сценарии поведение не имеет смысла.
было бы здорово, если бы это автоматическое переполнение работало и для абсолютного положения
С тех пор, как я задал этот вопрос, появился flexbox. Похоже, это отличное решение для многих мест, где раньше использовались поплавки: flexboxin5.com
Проверьте отсутствие открывающих / закрывающих </div> тегов! Это сводило меня с ума, пока я не понял, что у меня есть закрывающий div без открывающего элемента. В этом была вся проблема.
@Lisandro - вам следует использовать среду IDE, которая автоматически обнаруживает недостающие открывающие / закрывающие теги. IntelliJ, Visual Studio и многие другие сэкономят вам много времени, обнаружив эти ошибки сразу во время разработки.
в любом месте, где я могу посмотреть, почему переполнение работает на плавающем?
решения не относятся к вопросам! - должен был отредактировать решение с самым высоким рейтингом
@Julix Хотя я в принципе с вами согласен, это вопрос, который я задал и обновил девять лет назад. Я давно сделал это вики сообщества, оставив его поддерживать сообществу, и забыл о нем. С тех пор он был закрыт как дубликат. Если у вас есть твердое мнение по этому поводу, не стесняйтесь вносить изменения.
Однозначных мнений нет, извините за пояснение - моя позиция завышена. «Я думал, что решения не относятся к вопросам. Теперь я в замешательстве ... - Разве не лучший способ подойти к этому - отредактировать решение с самым высоким рейтингом?» - это более точное представление моих мыслей в том виде, в каком я их сейчас помню. - и я даже не видел, что это теперь помечено как дубликат. Не ожидал, что при голосовании 800+.
Если у вас возникают проблемы с отображением полос прокрутки при использовании overflow: auto, вы можете использовать overflow: hidden. Имейте в виду, что все, что выходит за пределы элемента, будет скрыто, включая тени CSS.
Могу я спросить, почему происходит такое поведение? в чем первопричина?
ясно: обе прокладки (решение 3) работают хорошо
Ответы 15
Я обычно использую трюк overflow: auto; хотя, строго говоря, это не является предполагаемым использованием для переполнения, это как бы связано с является - конечно, достаточно, чтобы его было легко запомнить. Значение самого float: left было расширено для различных целей более значительно, чем переполнение в этом примере, IMO.
Поздравляю, это именно официальное решение w3: w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
W3! = W3Schools, на самом деле W3Schools imho размещает очень "подозрительный" контент в отношении стандартного HTML.
Что касается W3Schools, я думаю, что они, по крайней мере, стали немного лучше с годами, но важно ли это понимать, как и @ D.R. сказал, Они не Консорциум Всемирной паутины (W3C)
Я использую 2 и 4, где это применимо (т.е. когда я знаю высоту содержимого или если переполнение не вредит). В другом месте я использую решение 3. Между прочим, ваше первое решение не имеет преимущества перед 3 (что я могу заметить), потому что оно больше не семантично, поскольку использует тот же фиктивный элемент.
Кстати, я бы не стал беспокоиться о том, что четвертое решение - взлом. Взломы в CSS могут быть вредными только в том случае, если их основное поведение подлежит переинтерпретации или другим изменениям. Таким образом, ваш взлом не будет гарантированно работать. Однако в этом случае ваш взлом полагается на точное поведение, которое должно иметь overflow: auto. Нет ничего плохого в том, чтобы устроить бесплатную поездку.
К сожалению, я удалил фиктивный элемент в первом решении. Это была ошибка. Спасибо, что указали на это.
Хотя код не совсем семантический, я думаю, что проще иметь то, что я называю «очищающим блоком», внизу каждого контейнера с плавающими элементами. Фактически, я включил следующее правило стиля в свой блок сброса для каждого проекта:
.clear
{
clear: both;
}
Если вы создаете стиль для IE6 (да поможет вам бог), вы можете также присвоить этому правилу высоту строки и высоту 0 пикселей.
Если у вас есть что-то вроде поля «Нравится» в Facebook внутри вашего элемента, вам нужно будет использовать этот метод, иначе, когда вы нажмете «Нравится», поле комментариев Facebook будет обрезано.
Идеальным решением было бы использовать inline-block для столбцов вместо плавающих. Я думаю, что поддержка браузера будет довольно хорошей, если вы выполните следующие действия: (а) примените inline-block только к элементам, которые обычно являются встроенными (например, span); и (б) добавить -moz-inline-box для Firefox.
Также проверьте свою страницу в FF2, потому что у меня было множество проблем при вложении определенных элементов (что удивительно, это тот случай, когда IE работает намного лучше, чем FF).
Вместо того, чтобы ставить overflow:auto на родительский, поставьте overflow:hidden
Первый CSS, который я пишу для любой веб-страницы, всегда:
div {
overflow:hidden;
}
Тогда мне не о чем беспокоиться.
Это плохая идея. Вы не хотите обрезать что-либо случайным образом, особенно если вы устанавливаете фиксированные размеры для этих div. Кроме того, бывают случаи, когда overflow: auto предпочтительнее overflow: hidden (например, вы хотите, чтобы контент был прокручиваемым при переполнении).
С тех пор, как я опубликовал это, я перестал использовать это как глобальное значение по умолчанию. Я считаю, что overflow:hidden чаще всего является лучшим решением. Каждый случай индивидуален. Спасибо что подметил это ;)
Нет проблем - я подумал, что все равно добавлю комментарий для потомков, на случай, если он когда-нибудь появится снова.
Побочный эффект: stackoverflow.com/questions/12783064/…
Проблема возникает, когда плавающий элемент находится внутри контейнера, этот элемент не заставляет автоматически регулировать высоту контейнера в соответствии с плавающим элементом. Когда элемент является плавающим, его родительский элемент больше не содержит его, поскольку элемент с плавающей точкой удаляется из потока. Вы можете использовать 2 метода, чтобы исправить это:
{ clear: both; }clearfix
Как только вы поймете, что происходит, используйте метод ниже, чтобы «очистить» это.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
У меня проблема с поплавками, сворачивающими мою границу div на ie6. Я добавил height: 0, который исправил IE6, но сломал IE7 и выше. :( Оказывается, height: 1% исправляет ie6 и не уничтожает ie7up!: D
Одно из наиболее известных решений - это вариант решения номер 3, в котором вместо несемантического элемента html используется псевдоэлемент.
Это выглядит примерно так...
.cf:after {
content: " ";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
Вы помещаете это в свою таблицу стилей, и все, что вам нужно, это добавить класс cf к элементу, содержащему поплавки.
Я использую еще один вариант, созданный Николасом Галлахером.
Он делает то же самое, но он короче, выглядит аккуратнее и, возможно, используется для выполнения другой, очень полезной вещи - предотвращения коллапса полей дочерних элементов вместе с его родителями (но для этого вам нужно что-то еще - подробнее об этом здесь http://nicolasgallagher.com/micro-clearfix-hack/).
.cf:after {
content: " ";
display: table;
clear: float;
}
Решение 1:
Самый надежный и ненавязчивый способ выглядит так:
Демо: http://jsfiddle.net/SO_AMK/wXaEH/
HTML:
<div class = "clearfix">
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
</div>
CSS:
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
При небольшом нацеливании на CSS вам даже не нужно добавлять класс к родительскому DIV.
Это решение обратно совместимо с IE8, поэтому вам не нужно беспокоиться о сбое старых браузеров.
Решение 2:
Была предложена адаптация решения 1, которая выглядит следующим образом:
Демо: http://jsfiddle.net/wXaEH/162/
HTML:
<div class = "clearfix">
<div style = "float: left;">Div 1</div>
<div style = "float: left;">Div 2</div>
</div>
CSS:
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class = "ie7-clear"></div>' );
}
.ie7-clear {
display: block;
clear: both;
}
Это решение, похоже, обратно совместимо с IE5.5, но не тестировалось.
Решение 3:
Также можно настроить display: inline-block; и width: 100%; для имитации нормального блочного элемента без сворачивания.
Демо: http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {
display: inline-block;
width: 100%;
}
Это решение должно быть обратно совместимо с IE5.5, но было протестировано только в IE6.
-1 Встроенный блок со 100% имеет нежелательные эффекты, когда у вас есть отступы для этого элемента. -1: after не работает в ie6
@lededje: IE6 (черт, даже IE7) имеет неработающую модель с плавающей запятой, которую невозможно полностью исправить с помощью какого-либо clearfix.
@BoltClock Совершенно верно, я никогда не тестировал их в реальных версиях браузеров, я использую (d) Adobe BrowserLab.
@lededje У вас может быть действительная точка зрения, но я не должен делать за вас всю работу. Вы можете протестировать эти методы, и если они не работают для вас найти другое решение или просто измените их, их не так сложно понять.
серьезно, кого волнует IE6: D IE8, я бы понял это, но IE6 слишком много даже для 2012 года: P
Эти решения просто не работают для моей страницы.
@ChrisRedford Если у вас возникли какие-либо конкретные проблемы, задайте вопрос на главном сайте Stack Overflow.
Ах. Что ж, решение overflow: auto в OP сработало для меня, поэтому я просто использую его.
+1 inline-block (с overflow: hidden и padding) работает в моем случае: размещение пары блочных элементов внутри родительского div. да, я прямо сейчас здесь что-то разрабатываю для IE6. В 2013 году о_О
Какое решение об ориентации на пользователей заставляет проект рассматривать пользователей IE6? В настоящее время они представляют 0,1% пользователей (w3schools.com/browsers/browsers_explorer.asp)
@MrMe, я лично никогда не занимаюсь разработкой для IE6 (хотя все еще должен делать IE7), но вам придется разрабатывать для него, если вы делаете веб-сайт для компании, которая его использует.
Потрясающе, как и все 3 решения.
Я думаю, что content: " "; может быть content: "";, что было бы более чистым.
Решение 1 потрясающее! Мне очень надоел лишний и бессмысленный <div class = "clearfix"></div> ..
-1 в поддержку стандартов .... поскольку это не включает официальный W3 clearfix (w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix), предложенный в другом ответе Бобби.
@davidtaubmann W3Schools является нет каким-либо образом официальным или частью стандартов, они управляются сторонней корпорацией, не связанной с W3C. Хотя они значительно улучшились за последние несколько лет, многие разработчики до сих пор считают их плохим источником информации. Я предлагаю вам в целом ознакомиться с документами MDN или Web Platform Docs (гораздо менее исчерпывающими, но официальными). Я пропустил трюк с overflow: auto, потому что он упоминается в вопросе, который требует других предложений.
это действительно здорово ... но кто-нибудь знает, ПОЧЕМУ это работает? (переполнение: авто)
@carine, у меня нет официального источника, подтверждающего это, но, насколько я понимаю, это работает так: элемент в состоянии по умолчанию позволяет любому содержимому внутри него переполняться (overflow: visible), так что это действительно не так ' Для правильного отображения не нужно знать, какой он высоты. После того, как вы установите overflow: auto / scroll, ему необходимо вычислить собственную высоту, чтобы увидеть, пройдена ли максимальная высота или максимальное доступное пространство. После расчета он используется в макете, и элемент больше не сворачивается, потому что теперь имеет значение его высота. Я надеюсь, что в этом есть смысл.
@Carine Это должна быть та же идея с display: inline-block (это мое единственное оригинальное решение). Если элемент является встроенным, вещи оборачиваются вокруг него, поэтому необходимо рассчитать его размеры в обоих направлениях. Установка его ширины на 100% не влияет на процесс макета, так что это тоже работает. AFAICT, основная идея clearfix заключается в том, чтобы сделать высоту родительского элемента важной для браузера, чтобы выполнялись вычисления и принимались результаты.
Основная проблема, с которой вы можете столкнуться при изменении переполнения на auto или hidden, заключается в том, что все может стать прокручиваемым с помощью средней кнопки мыши, а пользователь может испортить весь макет сайта.
Странно, что пока никто не дал на это полного ответа, ну вот он.
Решение первое: ясно: оба
Добавление блочного элемента со стилем clear: both; на него очистит поплавки за этой точкой и остановит коллапс родителя этого элемента. http://jsfiddle.net/TVD2X/1/
Плюсы: позволяет очистить элемент, и элементы, которые вы добавляете ниже, не будут затронуты плавающими элементами выше и действительным CSS.
Минусы: требуется другой тег для очистки поплавков, раздутие разметки.
Примечание: чтобы вернуться к IE6 и чтобы он работал с воздерживающимися родителями (т.е.элементом ввода), вы не можете использовать: after.
Решение второе: дисплей: таблица
Добавление отображения: таблица; родительскому объекту, чтобы он не обращал внимания на поплавки и отображал правильную высоту. http://jsfiddle.net/h9GAZ/1/
Плюсы: без дополнительной разметки и намного аккуратнее. Работает в IE6 +
Минусы: требуется недопустимый css, чтобы убедиться, что все работает нормально в IE6 и 7.
Примечание. Автоматическая ширина IE6 и 7 используется для предотвращения того, чтобы ширина составляла 100% + заполнение, чего не происходит в новых браузерах.
Заметка о других «решениях»
Эти исправления возвращаются к самому низкому поддерживаемому браузеру, более 1% использования во всем мире (IE6), что означает, что использование: after не сокращает его.
Скрытое переполнение показывает содержимое, но не предотвращает сворачивание элемента и поэтому не отвечает на вопрос. Использование встроенного блока может привести к ошибочным результатам, у детей будут странные поля и так далее, таблица намного лучше.
Установка высоты действительно «предотвращает» обрушение, но это неправильное решение.
Неверный css
Неверный css никогда никому не повредил, фактически, теперь это норма. Использование префиксов браузера так же недопустимо, как и использование специальных хаков для браузера, и никак не влияет на конечного пользователя.
В заключение
Я использую оба вышеупомянутых решения, чтобы элементы правильно реагировали и хорошо играли друг с другом, я умоляю вас сделать то же самое.
С каких это пор IE6 поддерживает display: table?
[rant] См. caniuse.com/#feat=css-table, для полного списка совместимости. IE 6 и 7 имеют поддержку нет для display: table;. Что касается вашего другого решения, оно уже упоминалось в вопросе, который запрашивает «предложения Другой». Пожалуйста, прочтите вопрос и все ответы, прежде чем дать свой ответ и проголосовать против других. Еще один момент: недопустимый CSS может никому «не повредить», но он недействителен независимо от того, и префиксы поставщика - это не просто принятая норма. Посмотрите в инспекторе Chrome, и вы увидите, что он не просто считает их недопустимыми, они вообще не обрабатываются. [/ rant]
[ответ на разглагольствование] Прежде всего, вышеупомянутые методы протестированы в IE6, и они все работают нормально. Приведите нерабочий пример и вернитесь ко мне. Специальные правила поставщика не предназначены для обработки в браузерах, к которым они не применяются (это то, что означает конкретный поставщик ...) Так что да, конечно, они не будут обрабатываться ... в этом суть, но все же позволяет использовать передовые правила CSS. [/ response to rant]
То, что ваш метод display: table работает в IE6 / IE7, не имеет ничего общего с display: table и все, что связано с zoom: 1. См. jsfiddle.net/BoltClock/h9GAZ/2 (удаленный zoom: 1) и jsfiddle.net/BoltClock/h9GAZ/3 (удаленный display: table). В сочетании с заявлением «Требуется недопустимый css [для] IE6 и 7» это все равно, что сказать, что метод вообще не работает в этих версиях.
Масштаб: 1; больше не действует css?
zoom никогда не входил ни в одну спецификацию CSS ... он был создан и использовался только Microsoft.Делает это недействительным CSS ...? Я не знаю, к чему вы клоните; это бесполезно и ни к чему не приведет. Приведенный выше ответ работает, конец.
Я хочу сказать, что вы говорите, что display: table работает в IE6 +, что совершенно неверно. Патч zoom: 1 существует сам по себе и не имеет ничего общего с display: table, поэтому утверждение, что решение display: table работает в IE6, в лучшем случае вводит в заблуждение. Я не сказал, что использование недействительного CSS неправильно - меня это тоже не волнует, но, с другой стороны, меня беспокоят вводящие в заблуждение ответы.
Я просто отличал одно от другого, не нужно (как вы так профессионально выразились) [разглагольствовать] об этом. Скрипки нужны для того, чтобы дать рабочие версии того, что я имел в виду в каждом решении. Пожалуйста, брось это. ОАО
Решение display: table было фактически единственным, которое работало в моем контексте (расширение Chrome, внедряющее CSS в сложный сайт). Огромное спасибо за это!
-1 за утверждение, что это полный ответ
Другое возможное решение, которое я считаю более семантически правильным, - это изменить плавающие внутренние элементы на display: inline. В этом примере и над тем, над чем я работал, когда я наткнулся на эту страницу, используются плавающие блоки div почти так же, как и диапазон. Вместо использования div переключитесь на span или, если вы используете другой элемент, который по умолчанию является display: block вместо display: inline, измените его на display: inline. Я считаю, что это 100% семантически правильное решение.
Решение 1, плавающее по родительскому объекту, состоит в том, чтобы изменить весь документ, который будет перемещаться.
Решение 2, установка явной высоты, похоже на рисование прямоугольника и сообщение, что я хочу поместить сюда картинку, т.е. используйте это, если вы делаете тег img.
Решение 3, добавление разделителя для очистки плавающего объекта, похоже на добавление дополнительной строки под вашим контентом и также повлияет на окружающие элементы. Если вы используете этот подход, вы, вероятно, захотите установить для div значение height: 0px.
Решение 4, overflow: auto, подтверждает, что вы не знаете, как разместить документ, и признаете, что не знаете, что делать.
Вы также собираетесь удалить объявление с плавающей запятой? Поскольку плавающие элементы не могут быть чем-либо, но display: block.
Я считаю, что лучший способ - установить clear:both на предстоящий элемент.
Вот почему:
1) Селектор :after не поддерживается в IE6 / 7 и глючит в FF3, однако,
если вас интересует только очистка IE8 + и FF3.5 + с помощью: after, вероятно, лучше для вас ...
2) overflow должен делать что-то еще, поэтому этот взлом недостаточно надежен.
Примечание для автора: в очистке нет ничего хитрого ... Очистка означает пропуск плавающих полей. CLEAR с нами, так как HTML3 (кто знает, может быть, даже дольше) http://www.w3.org/MarkUp/html3/deflists.html, возможно, им стоит выбрать немного другое имя, например page: new, но это всего лишь деталь ...
Мой любимый метод - использование класса clearfix для родительского элемента.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
добавьте это в родительский div внизу
<div style = "clear:both"></div>
Существует несколько версий clearfix, ключевыми авторами которых являются Николас Галлахер и Тьерри Кобленц.
Если вам нужна поддержка старых браузеров, лучше всего использовать это clearfix:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
В SCSS вы должны использовать следующую технику:
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
Если вас не волнует поддержка старых браузеров, есть более короткая версия:
.clearfix:after {
content:"";
display:table;
clear:both;
}
Я не знал о трюке overflow: auto - я всегда использовал метод очистки div. Спасибо за совет.