плыть налево; против дисплея: встроенный; vs display: встроенный блок; против отображения: ячейка таблицы;

Я обычно использую float: left; и добавляю overflow: auto; в решить проблему сбрасывания родительских проблем (о том, почему это работает, overflow: auto будет развернуть родительский элемент вместо добавления полос прокрутки, если вы не укажете его явную высоту, также работает overflow: hidden). В большинстве случаев для вертикального выравнивания я имел для однострочный текст в списках меню, который можно решить с помощью свойства line-height. Если мне действительно нужно вертикально выровнять элемент блока, я бы установил явную высоту на родительском и вертикально выровненном элементе, положение абсолютное, верхнее 50% и отрицательное поле.

Причина, по которой я не использую display: table-cell, - это то, как она переполняется, когда у вас больше элементов, чем может обрабатывать ширина сайта. table-cell заставит пользователя прокручивать по горизонтали, в то время как поплавки будут обертывать меню переполнения, что делает его еще пригодным для использования без необходимости горизонтальной прокрутки.

Самое лучшее в float: left и overflow: auto - это то, что он работает вплоть до IE6 без хаков, возможно, даже дальше.

Я бы сказал, это зависит от того, что вам нужно для этого:

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

• Если вам это нужно для меню, вы можете использовать inline-block. Для проблемы с пробелами вы можете использовать несколько трюков, как описано Крисом Койером здесь http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

• Если вам нужно сделать опцию множественного выбора, ширина которой должна быть равномерно распределена внутри указанного поля, тогда я бы предпочел display: table. В некоторых браузерах это будет работать некорректно, поэтому это зависит от поддержки вашего браузера.

Наконец, лучший способ - использовать flexbox. Спектр для этого несколько раз менялся, поэтому он пока не стабилен. Но как только он будет завершен, это будет лучший метод, который я считаю.

Только для записи, чтобы добавить ответ Spudley, есть также возможность использовать position: absolute и поля, если вы знаете ширину столбцов.

Для меня основная проблема при чистке метода заключается в том, нужны ли столбцы для заполнения всей высоты (равные высоты), где table-cell - самый простой метод (если вам не нравятся старые браузеры).

Я предпочитаю встроенный блок, хотя float также полезен. Табличная ячейка не отображается корректно старыми IE (ни встроенный блок, а там zoom: 1; *display: inline хак, который я часто использую). Если у вас есть дети, которые имеют меньшую высоту, чем их родитель, поплавки вернут их в начало, тогда как inline-block будет иногда испортиться.

В большинстве случаев браузер будет интерпретировать все правильно, если, конечно, это не IE. Вы всегда должны проверить, чтобы убедиться, что IE не сосать - например, концепция табличной ячейки.

Во всей реальности, да, это сводится к личным предпочтениям.

Один метод, который вы могли бы использовать, чтобы избавиться от пробела, заключался в том, чтобы установить font-size из 0 родительскому, а затем вернуть font-size детям, хотя это проблема и грубая.

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