パソコンQ&A

floatは正しく使わないと、自分の思った挙動をしてくれません。
ブラウザのバグかな？と思っても、実はCSS的に正しいことだったりします。

フロートの概念


次の例は上の画像がボーダーを突き抜けてるだけじゃなく、下の領域にも影響してます。

□□□□□□□ □□□□□□□

これを回避するには、いろいろな方法が提案されてますが、よくわからなければfloatの影響が終わるところにちゃんと clearを入れるのがいいのではと思います。
ステップアップの第１歩です。ガンバッテ！
[関連項目] floatの親ボックスの背景を表示するには

clearの例
<div style="font-size: 0;line-height: 0;clear: both;height: 0px;visibility: hidden;"><br /></div>

classで書く場合
.clear {
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0px;
  visibility: hidden;
}

<div class="clear"><br /></div>

□□□□□□□ □□□□□□□

注意：ブラウザによっては縦スクロールするときにボーダーの線が一部消えることがあります。
Peekabooバグの関係でしょうか？

２カラムのあとに１カラムが来る場合は下の領域のスタイルにclear: both;を書く手法もありますが、 スタイルシートを替えても２カラムのデザインに変更がないということであれば、『なるべく早いうちに』また『明示的に』という意味でも <div class="clear"><br /></div>でclearしたほうがいいのかとも思います。
（外部スタイルシートを使うメリットは減りますが…）

float:left; idth:115px; □□□□□ □□□□□ □□□□□ □□□□□ □□□□□ float:right; idth:115px; □□□□□ □□□□□ □□□□□ □□□□□ □□□□□ clear: both; □□□□□ □□□□□ □□□□□ □□□□□ □□□□□ □□□□□

△上に戻る