CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのclearfixハックでフロート（float）を解除する方法をわかりやすく解説

CSSで画像や要素にfloatを指定すると、親要素がフロートした子要素の高さを正しく認識できなくなり、レイアウトが崩れてしまうことがあります。このような問題を解決するために使われるのが「clearfixハック」です。

clearfixとは？

clearfixは、フロート（回り込み）を設定した子要素の影響を親要素が受けないようにするためのテクニックです。代表的な方法の一つとして、親要素に overflow: auto; を指定する手法があります。これにより、親要素はフロートした子要素も含めて高さを計算するようになり、レイアウトの崩れを防げます。

実装例

以下のコードでは、clearfixを使用しない場合と使用した場合の違いを比較できます。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    div {
        border: 3px solid rgb(21, 0, 114);
        padding: 5px;
    }
    img {
        float: right;
    }
    .clearfix {
        overflow: auto;
    }
</style>
</head>
<body>
<h1>Clearfix hack example</h1>
<h2>Without Clearfix</h2>
<div>
<img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100"/>
Sample Text
</div>
<h2 style="clear:right">With Clearfix</h2>
<div class="clearfix">
<img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100"/>
Sample Text
</div>
</body>
</html>

コードのポイント

  • img要素へのfloat指定： float: right; により、画像が右側に回り込みます。
  • clearfixなしの場合： 親要素のdivはフロートした画像の高さを考慮しないため、枠線が画像に重なるように表示されます。
  • clearfixありの場合： .clearfix クラスに overflow: auto; を指定することで、親要素がフロートした子要素を正しく包み込み、枠線が画像全体を囲む形になります。
  • clearプロパティ： 見出しに style="clear:right" を指定することで、直前のフロートの影響を受けて後続の要素が回り込むのを防いでいます。

出力結果

上記のコードをブラウザで実行すると、「Without Clearfix」では親要素の枠がフロートした画像を正しく囲まず崩れた表示になりますが、「With Clearfix」では overflow: auto; の効果により、親要素が画像を含んだ状態で正しく表示されることが確認できます。

  1. CSSでスクロールバーを非表示にする方法をわかりやすく解説

    CSSでスクロールバーを非表示にする基本の方法Webページや特定の要素からスクロールバーを非表示にしたい場合、CSSのoverflowプロパティを使うのが最もシンプルな方法です。overflow: hidden;を指定すると、コンテンツが領域からあふれてもスクロールバーが表示されなくなります。実装例<!DOCTYPE html> <html> <head> <style> body { height: 150vh; width: 200vw; overflow: hidden;

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>