背景画像が伸びたり、レイアウトが崩れる時の原因

  • 背景画像が伸びる
  • 意図していない余白ができる
  • レイアウトが崩れる
  • 画像や文字が消える

これらの原因もとなるのが、スタイルシートの「float」です。floatを使った要素の後には、しっかりと寄せを解除してあげないと、上記のようなトラブルを抱えることとなります。

float解除の例

左寄せした画像の説明文

float要素を括ったdivに「class="clearfix"」を指定して、floatを解除しましょう。

【HTML】

<div class="clearfix">
    <img src="img1.gif" alt="画像1">
    <p>左寄せした画像の説明文</p>
</div>

【CSS】

/* --- float解除 --- */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

どの要素がレイアウト崩れを引き起こしている原因か分からない場合は、スタイルシートから「float」を使っている部分の「float:left/float:rigtht」を一つずつ消していきながら、確認してみて下さい。

スポンサードリンク