現在ホームページリニューアルに伴い、閲覧しづらい状態になっております。何卒ご了承ください。

float 解除と clearfix

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

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

[/su_note]

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

float 解除するには?

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

[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 に以下の記述をする。( IE8 以降に有効)

.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]

 

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

 

よかったらシェアしてね!
目次
閉じる