CSS, используя display: table with before pseudo element

Я искал лучший способ очистить поплавки и найти это идеальное решение, если вы посмотрите на ответ, в решении используйте display:table, а не display:block, объясняется причина:

Использование table, а не block, необходимо только при использовании :before, чтобы содержать верхние поля дочерних элементов.

Я пытаюсь понять смысл, я сделал несколько тестов, но я не могу понять, в чем причина использования display:table, если кто-то может предоставить пример кода, чтобы показать разницу и необходимость использования display:table.

Edit:

Вот fiddle, я пытаюсь проверить разницу, я уверен, что есть один, но я не могу понять что тестировать.

Изменить для пояснений:

Мой вопрос не о разнице между дисплеем block/table, мой вопрос касается причины использования display:table, а не display:block (в отношении очистки поплавков), есть объяснение, данное Брайаном из этого ответа, но я не могу понять причину, если кто-нибудь может объяснить причину и, возможно, предоставить пример кода, иллюстрирующий разницу.

Ответ 1

Комментарий - и, наконец, код, который вы указали, - это взломать micro clearfix, предложенную Николасом Галлахером, как указано в верхнем ответе на этот вопрос. Николя написал статью , в которой была представлена техническая информация (которая по какой-то причине не связана с другим ответом), и в ней он объясняет, почему display: table используется следующим образом:

Это "micro clearfix" генерирует псевдоэлементы и устанавливает их display в table. Это создает анонимную табличную ячейку и новый контекст форматирования блоков, что означает, что псевдоэлемент :before предотвращает крах верхнего поля. Псевдоэлемент :after используется для очистки поплавков. В результате нет необходимости скрывать сгенерированный контент, и общий объем необходимого кода уменьшается.

Более подробно, если у элемента есть первый дочерний элемент, и оба они display: block, а у ребенка верхнее поле, происходит то, что дочерняя маржа будет объединена, или collapse с родительским полем (если есть), в результате чего верхний край, очевидно, исчезает из дочернего элемента, что иногда может быть нежелательным. Для иллюстрации этого эффекта см. этот вопрос.

Поля не разрушаются по элементам таблицы по очевидным причинам, поэтому работает display: table.

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

Ответ 2

Основное различие между дисплеем: таблицей и дисплеем: блок в следующем кратком сводке.

display:table указывает, что элемент отображается в виде таблицы. Вложенные элементы должны отображаться как таблица-строка и табличная ячейка, имитирующие старые добрые ТР и ТД..

Live Work Demo

display:block означает, что элемент отображается как блок, поскольку абзацы и заголовки всегда были. Блок имеет пробелы выше и ниже и не допускает никаких элементов HTML рядом с ним, кроме случаев, когда они заказываются иначе (например, путем добавления объявления float к другому элементу).

Live Work Demo

Подробнее здесь