float 【要素を寄せて配置する】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

floatプロパティは、要素を左や右に寄せて配置する際に使用します。後に続く内容は、その反対側へ回り込みます。
floatプロパティを使用する際には幾つか注意点があります。まず、ブロックレベル要素に使用する際にはwidthプロパティ指定が必須となります。floatプロパティは、positionプロパティでstatic以外の値が指定されている要素には適用されません。floatプロパティを使用した後は、解除したい場所にclearプロパティを指定した要素を記述します。

none
特に配置を指定しません。これが初期値です。

left
指定した要素を左に寄せます。

right
指定した要素を右に寄せます。

floatの使用例

CSSファイル

.sample001 {
 float: left;
 width: 180px;
 background-color: #ffcccc;
}
.sample002 {
 float: right;
 width: 180px;
 background-color: #ccccff;
}

HTMLソース

<span class="sample001">float: left; 左に寄せる</span>
<span class="sample002">float: right; 右に寄せる</span><br />
<span style=" clear: both;">フロート解除</span>

表示すると

float: left; 左に寄せる float: right; 右に寄せる
フロート解除

表示・配置関連項目

overflow(x y) はみ出た内容の表示方法を指定する 
position 要素の配置方法を指定する 
top 上からの配置位置(距離)を指定する 
right 右からの配置位置(距離)を指定する 
bottom 下からの配置位置(距離)を指定する 
left 左からの配置位置(距離)を指定する 
display 要素の形式(ブロック・インライン)を指定する 
float 左寄せ、右寄せ配置の指定 
clear 回り込み(float)を解除する 
z-index 重なりの順序を指定する 
visibility ボックスの表示・非表示を指定する 
clip ボックスを切り抜き表示(クリッピング)する 
direction 文字表記の方向(左右)を指定する 
unicode-bidi Unicodeの文字表記の方向を上書きする 
writing-mode 文字表記の方向(縦横)を指定する(IE独自) 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img