CSS, используя дисплей: таблица с перед псевдоэлементом

Question

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

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

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

Edit:

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

Edit для уточнений:

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

Answer 1

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

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

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

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

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

Answer 2

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

display:table указывает элемент для отображения в виде таблицы. Вложенные элементы должны быть отображены в виде таблицы-строки и таблицы-клетки, имитируя хорошие старые ТУ и TDs ..

Live Working Demo

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

Live Working Demo

More details here