floatプロパティを使った回り込み


CSSでレイアウトをする際に使う機会が多いのがfloatプロパティ。
floatプロパティを使うことで、指定した要素を回り込みさせます。

<div>
<img src="sample.jpg" class="leftimg">
<p>サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。</p>
</div>
<div class="clear">回り込みを解除するにはclaer:both;を指定します。</div>
.leftimg {
float:left;
padding:0px 10px 0px 0px;
}
.clear {
clear:both;
}
紅葉

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

回り込みを解除するにはclaer:bothを指定します。

上記例では画像のクラスにfloat:left;を指定することで、
画像を左に回りこませています。
またポイントなるのが回り込み解除させるため、
続く要素にclear:both;を指定すること。
この指定をしていないとレイアウト崩れの原因になります。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る