Web design test. HTML/CSS/jQuery.

試した様子を実際に見られます.

floatを解除する4つの方法

イメージ

更新:

公開:2015-03-17

CSSのfloatプロパティでの段組みを解除する方法です。clearプロパティやoverflowプロパティを使います。

基本形:floatの解除なし

先ずはfloat解除なしでやってみます。boxAとBを段組みにしてboxCを段組みなしにするイメージです。

	<div class="boxA">
		(内容)
	</div>
	<div class="boxB">
		(内容)
	</div>
	<div class="boxC">
		(内容)
	</div>
	.boxA	{
		border: 10px solid red;
		width: 20%;
		box-sizing: border-box;
		float: left;
	}

	.boxB	{
		border: 10px solid blue;
		width: 80%;
		box-sizing: border-box;
		float: left;
	}

	.boxC	{
		border: 10px solid green;
	}

box-sizing:border-boxでborderを含めた割合にしてあります。borderやpaddingがない場合はその行はいりません。

boxAとboxBは意図通り左右に並びましたが、下のboxBが崩れてしまいました。

float解除せず崩れ

ではこの基本形を元に4つの方法でfloatを解除してみます。

  1. 次の要素にclearプロパティ
  2. 空divにclearプロパティ
  3. divで囲いoverflowプロパティ
  4. divで囲いclearfix(クリアフィックス)
  • 各boxの中の内容は<P>タグで適当に文字を入れています。
  • 見やすくするためにCSSは上記以外に多少の装飾をしています。

【1】次の要素にclearプロパティ

段組み(float)を解除する次の要素(ここではboxC)にclear:bothを追加する方法です。

		.boxC	{
			border: 10px solid green;
			clear: both;
		}

boxCはboxA/Bの下に並んで崩れなくなりました。

float解除

boxBの内容を増やして高さがboxAより高くなっても、boxCはその下になりました。

float解除

  • 別途余分なdivを必要としません。
  • 変更でboxBとCの間に別の要素を加えたり、Cを削除する場合は注意です。clear:bothを別の場所に書き換える必要があります。

【2】空divにclearプロパティ

段組み(float)を解除する位置に空のdivを追加し、clear:bothを指定する方法です。

基本形に、CSSでclear:bothのクラスを作り、HTMLでboxBの後に入れた空divに当てます。

	<div class="boxA">
		(内容)
	</div>
	<div class="boxB">
		(内容)
	</div>
	<div class="clr-float"></div>
	<div class="boxC">
		(内容)
	</div>
		.clr-float	{
			clear: both;
		}

【1】同様boxCはboxA/Bの下に並んで崩れなくなりました。

  • 解除する位置にclearを置くのでピンポイントでわかりやすいです。
  • 記述上問題はなく好みの問題ですが、構造と無関係なdivを必要とします。

【3】divで囲いoverflowプロパティ

overflowプロパティを用いる方法です。

基本形に、HTMLでboxA/Bの外側をdivで囲い、CSSでそのdivoverflowを指定します。わかりやすいように囲うdiv=boxDを紫枠で表します。

	<div class="boxD">
		<div class="boxA">
			(内容)
		</div>
		<div class="boxB">
			(内容)
		</div>
	</div>
	<div class="boxC">
			(内容)
	</div>
		.boxD {
			border: 10px solid purple;
			overflow: auto;
		}

上記同様boxCはboxA/Bの下に並んで崩れなくなりました。

float解除

  • 段組み部分全体を囲むのでレイアウトしやすく、どの範囲が段組みとなっているか把握しやすいです。
  • 場合によっては、overflowで指定したautohiddenなどのキーワードによってスクロールバーが出たりなど表示が変化します。

【4】divで囲いclearfix(クリアフィックス)

clearfix(クリアフィックス)を用いる方法です。

基本形に、HTMLでboxA/Bをdivで囲い、CSSでそのdivclearfixを指定します。

	<div class="boxD">
		<div class="boxA">
			(内容)
		</div>
		<div class="boxB">
			(内容)
		</div>
	</div>
	<div class="boxC">
			(内容)
	</div>
		.boxD {
			border: 10px solid purple;
		}

		.boxD:after {
			content: "";
			display: block;
			clear: both;
			}

【3】同様boxCはboxA/Bの下に並んで崩れなくなりました。

  • 段組み部分全体を囲むのでレイアウトしやすく、どの範囲が段組みとなっているか把握しやすいです。
  • 旧verのブラウザは少し記述を加える必要がありますが、最近のものはたいていこれで問題ないようです。

float解除のまとめ

以上、4つの方法を挙げましたが、最近は4番目のclearfix(クリアフィックス)が多く使われているようです。floatをしたらいずれかの方法で解除するようにします。