BinaryDevelop
  1. ホーム
  2. css

[解決済み] クリアフィクス」はどのような方法で使用できますか？

2022-03-19 16:55:07

質問

という昔からの悩みがあります。 div を2カラムレイアウトで包んでいます。私のサイドバーはフローティングされているので、私のコンテナである div は、コンテンツとサイドバーを包むことに失敗しました。 

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Firefoxのクリアバグを修正する方法は多数あるようです。

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

私の状況では、唯一正しく動作しているように見えるのは <br clear="all"/> のソリューションは、ちょっとクドイです。 overflow:auto は厄介なスクロールバーを発生させるし overflow:hidden きっと副作用があるに違いない。 また、IE7はその間違った動作のため、この問題に悩まされることはないはずですが、私の状況ではFirefoxと同じように苦しんでいます。

現在利用可能などの方法が最も堅牢なのでしょうか？

どのように解決するのか？

制作するデザインに応じて、以下のclearfix CSSソリューションにはそれぞれ利点があります。

クリアフィックスには便利な用途がありますが、ハック的な使われ方もされています。clearfixを使う前に、これらのモダンなCSSソリューションが役に立つかもしれません。

モダン・クリアフィックス ソリューション

コンテナ overflow: auto;

フローティング要素をクリアする最も簡単な方法は、スタイル overflow: auto を含む要素に追加します。この解決策は、すべてのモダンブラウザで機能します。 

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

ただし、外部要素でmarginとpaddingの組み合わせを使用すると、スクロールバーが表示されることがありますが、これは別の親要素にmarginとpaddingを配置することで解決できます。

overflow: hidden' を使用することも明確な解決策ですが、スクロールバーが表示されません。 hidden は、包含する要素の外側に配置されたコンテンツを切り取ります。

注 フローティング要素は img タグを使用していますが、どのようなhtml要素でもかまいません。

クリアフィクス・リローデッド

Thierry Koblentz on CSSMojo さんが書き込みました。 最新のクリアフィクスをリロード . oldIEのサポートをやめることで、解決策を1つのcss文に簡略化できることを指摘しています。さらに display: block (代わりに display: table によって、clearfix を持つ要素が兄弟である場合に、余白が適切に折りたたまれるようになります。 

.container::after {
  content: "";
  display: block;
  clear: both;
}

クリアフィックスの最新版です。

⋮

⋮

旧クリアフィクス・ソリューション

以下の解決策は、モダンブラウザでは必要ありませんが、古いブラウザをターゲットにする場合に有効な場合があります。

これらの解決策は、ブラウザのバグに依存しているため、上記の解決策がどれもうまくいかない場合にのみ使用することに注意してください。

おおまかに年代順に並べています。

モダンブラウザ用クリアフィックス「Beat That ClearFix"」。

のThierry Koblentz氏。 CSSモジョ は、モダンブラウザをターゲットにする場合、現在では zoom と ::before プロパティ/値を使用するだけです。 

.container::after {
    content: "";
    display: table;
    clear: both;
}

このソリューションは、IE 6/7をサポートしていません。

Thierryは以下も提供しています: " 注意事項 なぜなら、oldIEをサポートしていなくても、既存のルールでは余白の折りたたみができないからです。

マイクロクリアフィックス

最も新しく、世界的に採用されているクリアフィクスソリューションである マイクロクリアフィックス by ニコラス・ギャラガー .

既知のサポート。Firefox 3.5+、Safari 4+、Chrome、Opera 9+、IE 6+。 

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

オーバーフロープロパティ

この基本的な方法は、位置決めされたコンテンツがコンテナの枠外に表示されないような、通常のケースに適している。

http://www.quirksmode.org/css/clearing.html - は、この技術に関連する一般的な問題、すなわち width: 100% をコンテナ上に配置します。 

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

を使うよりも、むしろ display プロパティを使って IE 用に設定することができます。 ある要素に対して "hasLayout" をトリガーする。 . 

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

を使用してフロートをクリアする別の方法 overflow プロパティを使用することです。 アンダースコアハック . IEはアンダースコアの付いた値を適用しますが、他のブラウザは適用しません。そのため zoom プロパティがトリガーとなる ハッシュレイアウト をIEで表示します。 

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

これは機能しますが...ハックを使用するのは理想的ではありません。

PIE：簡単クリアー法

この古いメソッドは、位置決めされた要素をコンテナの境界外にぶら下げることができるという利点がありますが、よりトリッキーなCSSを犠牲にすることになります。

この解決策はかなり古いものですが、「Position Is Everything」でEasy Clearingについて学ぶことができます。 http://www.positioniseverything.net/easyclearing.html

clear"プロパティを使用している要素

素早く何かを作り上げたいときのための、手軽で汚い解決策（いくつかの欠点もある）。 

<br style="clear: both" /> <!-- So dirty! -->

欠点

  • レスポンシブ対応ではないため、メディアクエリによってレイアウトスタイルが変化する場合、期待する効果が得られない可能性があります。純粋なCSSによるソリューションがより理想的です。
  • 必ずしもセマンティックな価値を付加することなく、htmlマークアップを追加します。
  • クリアフィックスという1つの解決策をCSSでクラス参照し、それをHTMLでクラス参照するのではなく、各インスタンスのインライン定義と解決策が必要である。
  • この問題を回避するためにさらにハックを書かなければならないかもしれないので、他の人にとってコードが作業しづらくなります。
  • 将来、別の clearfix ソリューションを使用する必要がある/使用したい場合、すべての <br style="clear: both" /> タグがマークアップに散らばっています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します