Преимущества использования display: inline-block vs float: left в CSS

127

Обычно, когда мы хотим иметь несколько DIVsстрок подряд, мы бы использовали float: left, но теперь я обнаружил уловкуdisplay:inline-block

Ссылка на пример здесь . Мне кажется, что display:inline-blockэто лучший способ align DIVsподряд, но есть ли недостатки? Почему этот подход менее популярен, чем floatтрюк?

Райан
источник
@Moak Это конкретные вопросы inline, а не о inline-block. Но первый из них хорош: stackoverflow.com/a/11823622/918414
ThinkingStiff
2
пример ссылка мертва
information_interchange

Ответы:

156

В 3-х словах: inline-blockлучше.

Встроенный блок

Единственным недостатком этого display: inline-blockподхода является то, что в IE7 и ниже элемент может отображаться только в том inline-blockслучае, если он уже был установлен inlineпо умолчанию. Это означает, что вместо использования <div>элемента вы должны использовать <span>элемент. На самом деле это не большой недостаток, потому что семантически a <div>предназначен для разделения страницы, а a <span>предназначен только для покрытия диапазона страницы, поэтому большой семантической разницы нет. Огромным преимуществом display:inline-blockявляется то, что когда другие разработчики поддерживают ваш код на более позднем этапе, гораздо более очевидно, что display:inline-blockи что они text-align:right пытаются выполнить, чем оператор float:leftили float:right. Моя любимая польза от inline-blockподхода заключается в том, что он прост в использовании vertical-align: middle, line-heightиtext-align: centerдля идеального центрирования элементов интуитивно понятным способом. В блоге Mozilla я нашел отличную запись о том, как реализовать кроссбраузерный встроенный блок . Вот совместимость браузера .

терка

Причина, по которой использование этого floatметода не подходит для макета вашей страницы, заключается в том, что floatсвойство CSS изначально предназначалось только для обтекания текстом изображения (стиль журнала) и по дизайну не лучше всего подходит для общих целей макета страницы. При последующем изменении перемещаемых элементов иногда возникают проблемы с позиционированием, потому что они не находятся в потоке страницы . Другой недостаток заключается в том, что для этого обычно требуется clearfix, иначе это может нарушить некоторые аспекты страницы. Clearfix требует добавления элемента после плавающих элементов, чтобы их родительский элемент не сжимался вокруг них, что пересекает семантическую грань между разделением стиля и контента и, таким образом, является анти-шаблоном в веб-разработке .

Любые проблемы с пробелами, упомянутые в приведенной выше ссылке, можно легко исправить с white-spaceпомощью свойства CSS.

Редактировать:

SitePoint - очень надежный источник советов по веб-дизайну, и они, похоже, придерживаются того же мнения, что и я:

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

Не дайте себя обмануть. Вам промывают мозги.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Обновление 2015 г. - Flexbox - хорошая альтернатива для современных браузеров :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Больше информации

Обновление от 21 декабря 2016 г.

Bootstrap 4 удаляет поддержку IE9 и, таким образом, избавляется от поплавков в строках и превращается в полный Flexbox.

Запрос на вытягивание # 21389

Алекс В
источник
4
«clearfix» - это просто имя; «исправление» указывает на исправление неверных ожиданий и / или неправильной реализации браузера. Я (с радостью) согласен с тем, что существуют альтернативы плавающему / клирингу, но в этом нет ничего принципиально сломанного или исправленного.
Тим Медора
10
@Alex - Есть ли нехакерский кроссбраузерный способ удаления пробелов между встроенными блочными элементами, которые находятся на отдельных строках? Я бы хотел прекратить использовать поплавки, но лучшие ссылки, которые я мог найти по этой проблеме ( здесь и здесь ), неудовлетворительны. Вы упомянули white-spaceнедвижимость - не могли бы вы это объяснить?
antinome
3
@Alex - спасибо, это очень круто, но я все же считаю подход float-with-modern-clearfix немного более удобным в обслуживании, потому что он не сломается, если я когда-нибудь буду настраивать letter-spacingгде-нибудь в моем CSS.
antinome
1
почему бутстрап все еще использует float для своей системы сеток? Разве это не макет?
AzDesign
2
Имейте в виду, что встроенный блок добавляет пустое пространство вокруг элементов. Если вы используете его для сетки или не хотите, чтобы это пустое пространство, вам придется добавить дополнительные стили / HTML-хаки, чтобы учесть это. См .: css-tricks.com/fighting-the-space-between-inline-block-elements/…
kretzm
23

Хотя я согласен с тем, что в целом inline-blockлучше, есть одна дополнительная вещь, которую следует учитывать, если вы используете процентную ширину для создания адаптивной сетки (или если вам нужна идеальная ширина до пикселей):

Если вы используете inline-blockсетки, общая ширина которых составляет 100% или почти 100%, вам необходимо убедиться, что ваша разметка HTML не содержит пробелов между столбцами .

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

Если по какой-либо причине вы не можете контролировать разметку HTML (например, ограничивающая CMS), вы можете попробовать описанные здесь приемы или вам, возможно, придется пойти на компромисс и использовать float вместо inline-block. Есть также уродливые приемы CSS, которые следует использовать только в крайних случаях, например, font-size:0;в контейнере столбца, а затем повторно применить размер шрифта в каждом столбце .

Например:

user56reinstatemonica8
источник
есть ли возможное обходное решение для отсутствия пробелов между ними, возможно, div+(whitespace) {display:none}или что-то в этом роде?
NoBugs 03
1
См. Третий абзац после первого предложения ... Особенно см. Связанный вопрос
user56reinstatemonica8
@NoBugs просто примените font-size: 0; к содержащему элементу, просто будьте осторожны, если у вас нет определенных размеров шрифта, установленных для элементов внутри встроенных блоков !!
Jai
@Jai Точно, и поскольку стиль / представление не должны пересекаться с процессом создания html / модели, это плохая практика. (Что, если вы воспользуетесь услугой, которая вам предоставила <div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
NoBugs
4

Если вы хотите выровнять divс точностью до пикселя, используйте float. inline-blockкажется, всегда требует от вас отрубить несколько пикселей (по крайней мере, в IE)

Vins
источник
6
Да, потому что вам нужно избегать использования пробелов между элементами, потому что строчные блоки учитывают пробелы так же, как и строчные элементы. Держите теги inline-block плотно друг к другу, чтобы не было проблем с пикселями.
Бен Синклер,
Кроме того, это может быть разница в браузере с отступом / полем по умолчанию для элементов .. Ну, по крайней мере, в прошлом я всегда делал, так * {padding:0px; margin:0px; }как это помогает сбалансировать мое кодирование
Angry 84
Интересно, это причина того, что Bootstrap (возможно, другие) использует его, а не встроенный блок?
NoBugs 03
1

Вы можете найти подробный ответ здесь .

Но в целом при этом floatнужно знать и заботиться об окружающих элементах иinline-block простом способе выровнять элементы.

Спасибо

Abhijit
источник
1

У встроенного блока есть одна особенность, которая может быть непростой. То есть значение по умолчанию для вертикального выравнивания в CSS - baseline. Это может вызвать неожиданное поведение при выравнивании. Посмотрите эту статью.

http://www.brunildo.org/test/inline-block.html

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

Сидней
источник