ちょっとややこしいdisplayプロパティ

自分の中でdisplayを使うことが少ないため、イマイチそれぞれのプロパティが意味するところがしっくりこなかったので、まとめた。

■display:block
横幅いっぱいになる。そのためblockの前後の要素は縦に並ぶ。
■display:inline
前後の要素が横に並ぶ。幅と高さは指定できない。
■display:inline-block
blockとinlineの両方で、要素を横並びにしつつ、幅と高さを指定できる。
■display:none
要素が非表示になる。

float:leftを入れると親要素のdivの高さがなくなる。そのためにclearfixを適用する

See the Pen display:block by takumi (@uchu-jin) on CodePen.

参考
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
[CSS]floatの指定が有る要素の親要素に高さを持たせる方法