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

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

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

В 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

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

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

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

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

Например:

• Вот сетка из 3 столбцов шириной 33,3% с расширениемfloat: left . Он «просто работает» (но для оболочки нужно очистить).
• Вот точно такая же сетка сinline-block . Пробелы между блоками создают пространство фиксированной ширины, которое выталкивает общую ширину за пределы 100%, нарушая макет и заставляя последний столбец выпадать на строку.
• Вот та же сетка, inline-blockбез пробелов между столбцами в HTML . Он снова «просто работает», но HTML уродливее, и ваша CMS может вызвать какие-то предварительные настройки или отступы для своего HTML-вывода, что затруднит это в реальности.

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

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

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

Спасибо

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

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

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