CSS floatの扱い方

float を利用して div タグ内のものを配置しようとしたとき、以下のように中と外の div タグが思うように配置できません。

#inner_div

{
width: 200px;
float: left;
}

コメントを一言書こうとしたけど・・・これじゃあだめかなあ？

#outer_div

{
width: 80%;
}

あれー下にはみ出しては困るんですけど？

外側の divタグに 'overflow:auto' を設定

#inner_div

{
width: 200px;
float: left;
}

コメントを一言書こうとしたけど・・・これじゃあだめかなあ？

#outer_div

{
width: 80%;
overflow:auto;
}

今度はきちんと入りました！

float 要素のクリア方法

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

IE 6/7 では zoom を利用する

.clearfix {
  *zoom: 1;
}

Float1

Float2

Float None

CSS float