float 解除と clearfix

要素を float させた場合、次の現象が起こります。
[su_note note_color=”#f7fafa”]

• 次の要素を正しく配置できない（表示が崩れる）
• 親要素の高さを認識しない（背景色や背景画像が表示されない）

[/su_note]

これらを解除するためにはどうしたら良いのでしょうか？

float 解除するには？

float を解除するには、以下の３つの方法があります。

[su_note note_color=”#f7fafa”]

1. 次に配置したい要素に clear プロパティを指定
2. 親要素に overflow プロパティを指定
3. 親要素の class に、clearfix を使用

[/su_note]

では、それぞれの方法について詳しくみていきましょう。

1. 次に配置したい要素に clear プロパティを指定

次に配置したい要素に、clear: both; を指定する。

[su_box title=”デメリット” title_color=”#ffffff”]

• 上方向の margin が効かなくなる
• 親要素に背景色や画像を配置したい場合、高さが認識されないため配置することができない

[/su_box]

2. 親要素に overflow プロパティを指定

親要素に、overflow: hidden; を指定する。

[su_box title=”デメリット” title_color=”#ffffff”]

• Firefox などの古いブラウザでは、印刷した時に float した部分が消えてしまうことがある
• position や z-index プロパティと組み合わせると、hidden の『はみ出た部分は表示させない』という仕様により、うまく表示されない場合がある

[/su_box]

3. 親要素の class に、clearfix を使用

clearfix とは、clear プロパティを使わずに float を解除する方法である。

①　CSS に以下の記述をする。（ IE８ 以降に有効）

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

 

②　親要素に class="clearfix" を追加するだけで、float 解除ができる。

まとめ

float を解除したい場合、以下の方法があることを紹介しました。

[su_note note_color=”#f7fafa”]

• clear: both;
• overflow: hidden;
• clearfix

[/su_note]

 

どの方法を選択するかについては、内容により臨機応変に使い分けるのが良いでしょう。