【HTML・CSS】 divなどで作ったfloat設定の領域が他の領域に重なる問題の対処方法

divタグ(要素)などで作った領域(ボックス)を左寄せにするため
CSS(スタイルシート)で float:left; を設定した時、
直下に作った他の領域(float設定無しの要素)と重なってしまう場合の対処方法をメモ。

<div>タグで作った領域(ボックス)を float:left; で横並びにした時などに起きやすい現象です。


下の画像のように領域A、Bを横並びにしようとCSSで float:left; を設定すると
直下の領域C(float設定無しの要素)に重なってしまいます。

1divfr.jpg

HTML


<div class="blockA" > <p>A</br>■</br>■</p> </div>
<div class="blockB" > <p>B</p> </div>

<div class="blockC" > <p>C</p> </div>

CSS(修正前)

.blockA{
  background-color:#f00;  /* 赤 */
  width:50px;
  float:left;
}
.blockB{
  background-color:#0f0;  /* 緑 */
  width:50px;
  float:left;
}

.blockC{
  background-color:#ff0;  /* 黄 */
  height:150px;
  width:150px;
}


CSSで領域Cに
"左(右)寄せになっている要素"に対する回り込み解除 clear:both; を設定すると分離します。
(もしくは float:left; に対する回り込み解除 clear:left; を設定)

2divfr.jpg

HTML(修正なし)

<div class="blockA" > <p>A</br>■</br>■</p> </div>
<div class="blockB" > <p>B</p> </div>

<div class="blockC" > <p>C</p> </div>

CSS(修正後)

.blockA{
  background-color:#f00;  /* 赤 */
  width:50px;
  float:left;
}
.blockB{
  background-color:#0f0;  /* 緑 */
  width:50px;
  float:left;
}

.blockC{
  background-color:#ff0;  /* 黄 */
  height:150px;
  width:150px;
  clear:both;         /* ←追加 */
}

[ 2012/07/28 17:22 ] HTML・CSS | TB(0) | CM(0)
SPONSORED LINK
人気ブログランキング
トラックバック
この記事のトラックバックURL
http://8cmp.blog.fc2.com/tb.php/25-2aab4948

コメントの投稿












管理者にだけ表示を許可する
▲ページトップ