20:59clearプロパティは、フロートボックスの側面に隣接して良いかどうかを指定します。一般的に「フロートの回り込みを解除する」と説明される事が多いプロパティで、先行する要素や内容にfloatプロパティの指定が有った場合に適用され、clearプロパティが指定された要素の子要素や後続する要素には適用されません。値none|left|right|both|inherit初期値none適用される要素ブロックレベル要素(CSS1では全ての要素だったため、br要素などのインライン要素にも適用される可能性が有ります)継承しませんパーセント値N/Aメディアvisual値の解説left先行するあらゆる左フロートボックスの下外辺に配置されるようクリアランスを生じさせます。この際、上マージンが十分な場合クリアランスは生じません。right先行するあらゆる右フロートボックスの下外辺に配置されるようクリアランスを生じさせます。この際、上マージンが十分な場合クリアランスは生じません。both先行するあらゆるフロートボックスの下外辺に配置されるようクリアランスを生じさせます。この際、上マージンが十分な場合クリアランスは生じません。none何の制御もしませんクリアランスとはCSS2まではクリアランスという概念は無く、フロートボックスの下外辺に配置されるよう上マージンが自動的に調整されるとなっていましたが、CSS2.1ではクリアランスという空白を生じさせるようになりました。言え、見た目上での変化は特にないと思います。このクリアランスはどんな時にどんな感じになってるかを図にすると、以下のような感じです。このように、clearプロパティの指定があった要素の上マージンが不十分な場合にクリアランスを発生させ、フロートボックスに隣接しないよう調整されます。上記の図に似たような感じで、実際のサンプルも作ってみました。class="clearSample01">ここで、clearプロパティの指定がされました。class="clearSample02">ここで、clearプロパティの指定がされました。#ccc;}このサンプルを今見ているブラウザで表示すると以下のようになります。サンプルのブラウザ上の表示CSS2まではクリアランスという概念は無く、フロートボックスの下外辺に配置されるよう上マージンが自動的に調整されるとなっていましたが、CSS2.1ではクリアランスという空白を生じさせるようになりました。ここで、clearプロパティの指定がされました。20px;CSS2まではクリアランスという概念は無く、フロートボックスの下外辺に配置されるよう上マージンが自動的に調整されるとなっていましたが、CSS2.1ではクリアランスという空白を生じさせるようになりました。ここで、clearプロパティの指定がされました。7は20pxになってしまいます。7の解釈が仕様に準拠していないため発生する現象です。クリアランスが必要無い下のサンプルは、画像から上マージンを計算せずに、テキストとclearが指定されたテキスト間でマージンが計算されるようなので、他のブラウザと同じ表示になります。7で解釈が大きく異なってくるので、clearプロパティを指定した要素には上マージン(margin-top)の指定はしないようにしましょう。left;の指定をしたサンプルです。このように指定すると、clearが指定された3番目のli要素はフロートボックスに隣接しなくなるので、1番目の画像の下に表示され、後続する4、5番目の画像は3番目の横に並びます。7で見ると3番目の画像だけ下に表示され、後続する4、5番目の画像は3番目が無かったかのように詰められて表示されてしまいます。このサンプルを今見ているブラウザで表示すると以下のようになります。サンプルのブラウザ上の表示このように、floatとclearが同時に指定されている場合も表示が変わってきてしまうので注意しましょう。7でも同様の表示にする場合は、2番目のli要素に右マージンを指定して対処する等の必要があります。