floatの解除「clearfix」 - 山崎パンダのWebデザイン勉強ノート

会社の制作ガイドラインではfloatを使ったときは「clear:both」で解除しましょ。
とあります。

でも、最近作られたサイトは「clearfix」をしばしば利用しているものが、ちらほら出現。
Dreamweaverのデザインビューでみると崩れまくってるので、
最初に見たときは「clearfix」を使ってるのに気がつかなくってビックリしました・・・。

というわけで。
今更ながら、「clearfix」のお勉強です。

clearfixでfloatを解除
↑のページを参考に・・・

右と左、両方フロートさせて、その下にフロートしてない要素がいます。

<body>

<div id="wrapper">

<div id="content">

<p>左にフロート</p>

</div>

<div id="menu">

<p>右にフロート</p>

</div>

</div>

<p>下の要素が隙間には入るの・・・</p>

</body>

#wrapper {

width: 300px;

border: solid 3px #999999;
}
#content {

float: left;

width: 124px;

height: 100px;

border: solid 3px;

color: #FF9999;
}
#menu {

border: solid 3px;

color: #99CC99;

float: right;

width: 124px;
}

親要素（#wrapper）にclass="clearfix"を追加してみましょ。