富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. CSS
  3. ブログ

CSS-floatプロパティについて

 

今回はCSSには欠かせない、よく使う基礎的なプロパティについてのご紹介です!

 

☆floatプロパティ☆

floatプロパティは、指定された要素を右または左に寄せて配置するプロパティです。

わかりやすく、図で見ていきましょう。

boxA,boxB,boxCを左から順番に一列に並べて配置したいとします。

floatなしではこのように順にタテに配置されます。

 

float1

CSSに{float:left;}を追加すると、このようになります。

 

float2

boxBとboxCが左に回り込んでいるのがわかりますね。

ちなみにboxAとboxBのみの配置で、boxBに{float:right;}を記述するとこのようになります。

 

float4

 

boxBが右に寄っています。

 

また、boxCに{clear:left;}と記述すると、左に回り込むのを解除できます。

 

 

float3

 

注意点!!

①必ず幅(width)を指定する

②floatは必ずclearで解除する

③positionプロパティでstatic以外の値には適用されないので注意

 

非常によく使用するプロパティですのでぜひ活用して下さい☆

 

 

この記事を書いたスタッフ