アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

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をしたらいずれかの方法で解除するようにします。