海に浮かぶ男性

WEB

float 解除と clearfix

要素を float させた場合、次の現象が起こります。

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

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

float 解除するには?

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

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

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

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

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

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

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

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

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

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

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

① CSS に以下の記述をする。( IE8 以降に有効)

 

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

まとめ

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

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

 

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

 

 
スポンサードリンク
 
スポンサードリンク

関連記事

  1. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not authenticate…

    『WP Mail SMTP』は、Gmailなどのメールサーバーを使って…

  2. いいえ、結構です。

    WEB

    お名前.comの自動更新の設定を解除する方法

    お名前.com でドメインを取得する際にクレジットカード払いを選択する…

  3. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールしてみよう

    エックスサーバーでサブドメインを設定して、WordPress をインス…

  4. カメラ

    WEB

    WordPressで最低限おさえておきたい画像処理について

    せっかく良い記事なのに画像がぼやけている…という残念なブログに会うこと…

  5. ドメイン

    WEB

    お名前.com でドメインを取得する方法

    WordPress でブログを始めるには、独自ドメインを取得しなくては…

  6. チェーン

    WEB

    footer を最下部に固定したい場合のコード

    ウェブサイトを制作中に、footer が浮き上がってきて困ったことはあ…



== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. パン
  2. チェックリスト
  3. mistake
  4. 洗濯物
  5. ペンを持つ手
  6. 海を背景にフレームを持つ女性の手
  7. ドメイン
  8. サーバー
  9. 緑のドア
  10. カレンダー

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!
  2. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not au…
  3. 広告

    WEB

    『DIVER』で、AMP対応のディスプレイ広告を表示させる方法と注意点
  4. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法…
  5. タイプライター

    WEB

    font-weight プロパティについて
PAGE TOP