divやブロック要素がつぶれる!CSSで当てた背景を見せたい場合はfloatで

divやブロック要素がつぶれることありませんか?

せっかくdivで囲った枠にborder(枠線)や背景を当てたのに、div自体がつぶれてしまって、うまく表示できないことがよくあります。

CSSで当てたborder(枠線)や背景を見せたい場合はClearFixかfloatがいいでしょう。

今回はfloatの方が簡単なので紹介します。
divやブロック要素がつぶれる理由は、そのブロック内でfloatを使っているときに起こります。
<div>
<div>一番左に流しているコンテンツfloat:left</div>
<div>その次に流しているコンテンツfloat:left</div>
</div>
というように、中身がフロートされていると囲っているdivのお尻までフロートされてしまうのです。
解決策は簡単です。囲っているdivにfloat:left;を当ててあげましょう。
もしそれで弊害が出たら、ClearFixを使うか、clear:both;を当てて回避しましょう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA