対象の要素をtableタグの標準挙動にするためのスタイル

display: table;

この指定には面白い効果がある。

通常 block の場合内部要素が 全て float されていると外部のブロックが縦方向に伸縮せず、高さがゼロと計算されてしまう。その結果後続要素が前述要素にめり込んでしまう。それを回避するために clearfix というテクニックがある。

table を指定すると、何故か内部に float を含んでいてもブロックの縦方向が伸縮し高さが自動計算される。

overflow: hidden;

とを指定した場合と同じような挙動である。ま、挙動がわかりにくいので素直に別の機能を使おう。

結構わかりやすいなと思ってたが仕様として消滅。おそらくこれって display じゃなかったんだな

Can I use... Support tables for HTML5, CSS3, etc

対象の要素の中身を横並びにして最大の高さを持つものに合わせる

display: box;

簡単に考えるならば、対象の要素の中身だけ通常の block 要素の挙動が90度回っているということである。 通常 block 要素は値を指定しなければ幅100％になり自動的に縦に積み上がっていくので、box 指定の要素の中身はその90度回しで値を指定しなければ高さ100％になり自動的にヨコに積み上がっていくのである。