Почему display: table устанавливает высоту родительского элемента равной высоте его самого большого плавающего дочернего элемента? - PullRequest
Новая
       9

Почему display: table устанавливает высоту родительского элемента равной высоте его самого большого плавающего дочернего элемента?

0 голосов
/ 18 мая 2018

Например, у меня есть эти строки кодов: 

<div class = "parent">
    <div class = "child1">Hello</div>
    <div class = "child2">This child element has the biggest height</div>
    <div class = "child3">Just another ordinary class</div>
</div>

И у меня есть следующее CSS: 

.parent {
    display: table;
}

.child1, .child2, .child3 {
    float: left;
}

.child1 {height: 200px}
.child2 {height: 1000px}
.child3 {height: 500px}

Почему он устанавливает высоту родительского элемента на то жевысота как "child2"?И почему нет, когда родительский элемент рассматривается как элемент блока (поскольку div отображается как блок, верно?)?

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

1 Ответ

0 голосов
/ 18 мая 2018

Там происходит пара вещей.Когда вы помещаете элементы вне таблицы внутри элемента с display:table, элементы вне таблицы автоматически переносятся в анонимные объекты для строки таблицы и ячейки таблицы.Итак, что дерево макета видит: 

table
  - table-row
      - table-cell
          - child1
          - child2
          - child3

Затем все ячейки таблицы устанавливают контексты блочного форматирования , что означает, что они содержат свои числа с плавающей точкой , очень похоже на использованиеoverflow:hidden для элемента блока без фиксированной высоты работает как своего рода clearfix.

Таким образом, ячейка таблицы полностью содержит числа с плавающей запятой, строка таблицы содержит ячейку таблицы, а таблица содержит строку таблицы.,Это означает, что таблица будет высотой наибольшего числа с плавающей точкой.

И да, можно использовать display:table, как это.Только не используйте реальные таблицы HTML для не табличных данных.

...