やっぱりfloatが分からん
なんかfloatを無効化するのにclearfixなるものがあるらしい。
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
「.clearfix」というクラスを、floatプロパティを使用している親の要素に指定して以下のCSSを設定すると親要素の中に子要素がおさまる……というわけです。
.clearfix:after {
content: '';
display: table;
clear: both;
}
clearfixをやる前にclearをキチンとやっておいた方がいいですね。
clear
left
要素は先行する 左の フロートと切り離され、下に移動します。
right
要素は先行する 右の フロートと切り離され、下に移動します。
うーんclearは子要素同士で使えるんだね。
clearfixの歴史を知るには以下を読み込むのがいいでしょう。
floatを解除する手法のclearfix と 次世代のレイアウトの話
そしてその進化版のdisplay: flow-root;というのもあるとのこと。
この記事↓がわかりやすかった。
CSSのマージンが効かない時の解決法（marginの縮小・折りたたみ）