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;を指定すること。
この指定をしていないとレイアウト崩れの原因になります。
