フロートについて

HTML&CSS

通常フローについて

サンプル
HTMLソース

<div id="container">
		<div id="box-A"><strong>A</strong>…Text Text Text </div>
		<div id="box-B"><strong>B</strong>…Text Text Text </div>
		<div id="box-C"><strong>C</strong>…Text Text Text </div>
		<div id="box-D"><strong>D</strong>…Text Text Text </div>
	</div>
div {
	margin: 10px;
	border: 5px solid #c1c1c1;
	background-color: #85b305;
}
#container{
	background-color:#9FF;
}
#box-B{
	background-color: #FFC;
}
strong{
	color:red;
	font-size:200%;
}

ABCDの各ボックスはすべて同じ条件のdivで囲まれたテキストです。現在は通常フローで綺麗に並んでいます。ボックスBだけはこれからフロートさせますので背景色を変えています。外側の水色のボックスはdiv#containerで各ボックスを囲んだものです。ABCD各ボックス間の上下のマージンは相殺されていることに着目してください。
次に、ボックスBのマージンを30pxに変更しました。ボックスAとボックスBの間のマージンはボックスBのマージン30pxとなります。またボックスBとボックスCの間のマージンもボックスBの30pxとなります。垂直方向のマージンはそれぞれ大きい方のマージンが反映され、合計の40pxにはなりません。
サンプル

フロート

フロートとは、通常フローからはずれて、現在の通常フローから左または右にシフトしたボックスです。フロートした結果の特徴はフロートしたボックス内の内容(テキストなど)が側面に沿って自由に動いてよい(これは後述の’clear’プロパティによって回り込みを禁止できる)ことです。内容(テキストなど)は左浮動ボックスの右側あるいは右浮動ボックスの左側に流れます。

フロートしたボックスは、自身の外辺が包含ボックス辺または別のフロートしたボックスの外辺に接するときまで左または右に移動します。

もし、テキストが存在する場合、フロートしたボックスの外上部は現在のテキスト上部で揃えられます。

フロートしたボックスのための十分な水平空間(横幅)がない場合、フロートしたボックス下に移動します。(カラム落ちの状態になる)

フロートしたボックスは通常フロー内にないので、浮動体の前後に生成された位置指定されないブロックボックスは、あたかも浮動体が存在しないかのように垂直に流れます。

サンプル

  1. ボックスBを左にフロートしました。幅は親(#container)の40%にしました。
  2. Bをフロートすると通常フローは崩れて後続のボックスC,DがフロートしたボックスBが存在しないかのようにボックスBの後ろに入りボックスAの下に通常フローします。
  3. ボックスC,Dの中のインライン要素のテキストがボックスBの幅のだけ領域を確保するように幅が調整されました。
  4. フロートするボックスのマージンは他のボックスのマージンと相殺されません。上下に隣接するAとBのボックスのマージンに着目してください。

クリア

clearプロパティとは

clearプロパティはブロック要素のみにかけることができます。(<br>で使用しない)

クリアとはクリアランスを導入するものです。クリアランスとはマージンを抑制し、クリアを設定したブロック要素のmargin-topの上へ空白のつっかえ棒を置いたように振る舞います。浮動体(フロートしたブロック)の背面に入り込んだ通常フローの下辺、あるいは浮動体の上に存在する通常フローの下辺、又は浮動体を囲む包含ブロックの上面から浮動体の下辺にマージンを作ります。
もし、クリアを設定したブロックレベル要素のmargin-topが設定されていたなら、そのマージン値とクリアランスは相殺され値の大きい方が適用されます。

サンプル

  1. ボックスDにクリアプロパティを入れました。clearプロパティはフロートを解除してクリアランスと呼ばれる特殊なマージンを広げフロートしたボックスの下方に位置するように調整されます。
  2. この例ではボックスDのクリアランスはボックスCの下辺からフロートするボックスBの下辺までマージンがとられます。分かりやすいように各ボックスのマージンは0にしています。
  3. ボックスDの上辺に、ボックスCの下辺からボックスBの下辺までのマージンよりも大きなマージンを設定するとそのマージン分だけ間隔が空きます。

高さがとれなくなった親

サンプル

  • ボックスのサイズ算出は通常フローしている要素に依存します。が、フロートした要素は無視されます。
  • ボックスBは親のcontainerから溢れ出します。親のcontainerはフロートしたボックスBのサイズを無視しています。

サンプル
全てのボックスをフロートさせると親ボックスの算出に使用するボックスがなくなり内容領域の高さは0になります。

サンプル

親ボックスがフロートした子のボックスを包むようにするには、floatを指定する要素の後続の要素にclear プロパティを設定します。

サンプル

  • 親要素にclearfix hackを使用すると親要素はフロートした子要素の高さをとることができます。
  • overflow:hidden を使用すると簡単にclearfix hackと同等の効果を得ることができます。
/* clearfix hack */
#container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container {
	display: inline-block;
}

/* hide macie */
*html #container {
	height: 1%;
}

#container {
	display: block;
}
/* end hide */
/* end clearfix hack */
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました