スポンサーリンク
スポンサーリンク

テキストの回り込みを設定するfloatプロパティ

CSS

通販サイトやニュースサイトを眺めていると
様々なコンテンツが横に並べて配置され、
それが複数あります。

今までこのブログの記事を書いてきた内容だけでは
左右にコンテンツを並べることができません。

今回、記事で触れるfloatプロパティを使用すると
横にコンテンツを並べることができます。

floatプロパティ

none 回り込みはしない デフォルト値
left 指定した要素を左に寄せて、
   次の要素は右に回り込ませる。
right 指定した要素を右に寄せて、
   次の要素は左に回り込ませる。

上記の例を見て頂ければ分かりますが、左に寄せたいもの
その後にも左に寄せたいものにfloat:leftを適用しています。

float:left/rightの回り込みを解除する
clearプロパティ

floatプロパティを使うときに気を付けなければいけないことがあります。
float一度指定設定するとその後続の要素も回り込んでいます。

このclearプロパティでbothを設定すると、この回り込みを解除ができ
この回り込みの場所より下の位置にコンテンツを配置することができます。

コメント

タイトルとURLをコピーしました