CSS 基礎チュートリアル

CSS 盒子モデル

CSSのfloat属性は、ボックスが浮動すべきかどうかを指定します。CSSのfloat属性は、位置の性質です。これは、要素を左か右に押し出し、他の要素がそれを囲むことを許可するために使用されます。これは通常、画像やレイアウトに使用されます。　　　

要素を左か右にフロートできるが、これは生成されたものが絶対位置のフレームの要素。フロート要素の後ろにある要素は、フロート要素の反対側に流れます。

このfloat属性は以下の3つの値のうちの1つを持つ可能性があります：

値	説明
left	この要素は、フレームの左側にフロートします。
right	この要素は、フレームの右側にフロートします。
none	float属性を要素から削除します。
initial	属性を初期値に設定します。
inherit	これは、親要素からこの属性を継承するために使用されます。

フロート要素は通常のフロートから移出され、可能な限り左か右に移動します。

除非浮動体のclear属性は、他の要素のフロートを防ぎます。他の要素は通常、フロート要素の周りに流れます。要素は水平にフロートします。これは、要素が上か下にフロートすることはできず、左か右にのみフロートできることを意味します。

例

img {
　　　　float: left;
}

隣接して配置された複数のフロート要素がある場合、水平空間がある限り、彼らは互いに隣接してフロートします。浮子を収める十分な空間がない場合、浮子は下に移動し、収めるまでまたは他の浮子がいないまで移動します。

例

.thumbnail {
　　　　float: left;
　　　　width:　125px;
　　　　height:　125px;
　　　　margin:　10px;
}

フロート要素の後の要素はその周りに流れます。このclear属性は、要素のフレームのどちら側に他のフロート要素を配置することを許可しないことを指定します。

例

.clear {
　　　　clear: left;
}

注意：この属性は、同じブロック内のフロートボックスから要素をクリアするだけでなく、要素自身内にフロートする子フレームからもクリアしません。クリアフロートに関する詳細については、以下を参照してください。CSSのアライメントチュートリアル。