floatしている要素の後にブロック要素がある場合(現象)
header
DIV1
DIV2
floatしている要素の後にブロック要素がある場合
header
DIV1
DIV2
※後続要素(今回はfooter)に「clear:both;」の設定をすれば解決
floatしている要素の後に要素がない場合(現象)
header
DIV1
DIV2
※clearするか高さの指定をしない限り背景に色はつかない
floatしている要素の後に要素がない場合(clearfix)
header
DIV1
DIV2
※HTML上には存在しなブロック要素をCSSにてつくることで解決させる XXX::after { content: ""; display: block; clear: both; } XXXにはfloatをセットしている親を指定する