web-dev-qa-db-ja.com

clearfixは非推奨ですか？

あなたは昔からの問題に気づいています：浮いた要素を含むコンテナは、子供を囲むために自動的に高さを拡大しません。

これを修正する1つのアプローチは、 "clearfix" です。これは、コンテナーが適切に引き伸ばされるように、いくつかのCSSルールを追加します。

ただし、コンテナにoverflow: hiddenを指定するだけでも同様に機能し、同じ量のブラウザの互換性があります。

このガイド によると、両方の方法は、今日重要なすべてのブラウザ間で互換性があります。

これは、「clearfix」が非推奨になることを意味しますか？ overflow: hiddenよりも使用することに利点はありますか？

ここに非常によく似た質問があります： clearfix hackとoverflow：hiddenとoverflow：autoの違いは何ですか？ しかし、質問は実際には答えられていません。

htmlcssclearfix
49
Pekka

overflow: hiddenはいつでも使用できます。

ただし、にはの例外があります。これがその一例です：

コンテナdivを水平方向にオーバーフローしますが垂直方向にはオーバーフローしません

そこにあった質問：

overflow: hiddenを使用できない場合のより重要な例を次に示します。

http://fordinteractive.com/misc/overflow/

Clearfixがonlyの代替手段であると言っているわけではありません-display: inline-blockはその例をきれいに修正します。

http://jsbin.com/ubapog

32
thirtydot

別の回答で述べたように、hiddenの欠点は、驚くべきことに、ドロップダウンメニューなどを非表示にすることです。ただし、親コンテナをフローティングすることにより、1行で含める別の方法があります。これは通常、overflow: hiddenに欠点がある場合に機能します。また、フローティングは、特にリストで、多くのレガシーIEの問題に役立ちます。幅を使用できる場合は、 「フロートインフロート」、またはdisplay: inline-block。

「clearfix」が役に立たないと言っているわけではありませんが、私にとっては、CMSテーマ（WordpressやDrupalなど）に広く定着しすぎているため、多くの場合、使いすぎだと思います実際にクリアまたは封じ込める必要のないdiv。

Clearfixを超えて、オーバーフローもフロートも使用できない状況は実際には考えられませんが、私の脳はホリデーモードになっています-しかし、clearfixはコピー/貼り付けソリューションであり、推奨するのが最も簡単な場合があります。ただし、これはIEのhasLayoutを設定するものである必要があります。もちろん、オーバーフローとフロートの両方も同様に設定されます。

addedこれはちょうど再び現れました：そして脳は休日モードではありません。

私は本当にそうだと思い始めています、clearfixは必要ありません（少なくとも私はまだそれがある例を見つけていません）@thirtydotの例でさえ上記はdisplay: inline-blockで回避でき、IE6を引き続きサポートします。固定幅のコンテナーには、IE7以下のhasLayout要件があり、他のすべてのブラウザーのインラインブロックにすることで、中央に配置して「コンテナが垂直方向に伸びている間、オフセット "スティッキーアウト要素は正常に機能します

例

また、clearfixハックで:beforeと:afterを使用して、マージンを折りたたむための新しい改善されたclearfixへの参照も確認しましたが、何かが足りない場合を除いて デモに欠陥があります） -pre要素に不均一な空白があり、「clearfixed」ボックスには実際にはフロートが含まれていません。要素をフロートするとすぐに、各メソッドは同じように実行されます。

pre要素のマージンは他の要素と同じように反応しないことに注意してください（したがって、テスト中に同じ画像を表示するには、マージンの代わりにパディングを試してください）。また、別のIE "foible"これにより、IEは明示的に指定されていない場合、マージンが適切に含まれず、デモではh2に明示的なマージンがありますが、pしたがって、そのページでTJKによってデモされたように、すべてのものがclearfixed要素に等しいと、ブラウザが行うために1pxの上下のパディングが行うのとほぼ同じ方法で、通常のブロック要素のマージンの封じ込めが人為的に強制されます。とにかくこれは違う！

次に、要素をそれらのコンテナ内にフロートさせます（とにかくクリアするポイント）-マージンには、新しいブロックフォーマットコンテキスト内の場合と同様に、おそらく必要に応じて含まれます-余分な:beforeはありませんハックの一部として、すべてのclearfixバリエーションが同等に機能します！

リロードされたデモを参照

したがって、私の考えでは、この「clearfix」方法はもう必要ありません。古いIEのhaslayoutを使用して、新しいブロックフォーマットコンテキストを作成するための最良の方法を見つけるだけです。両方のプロパティは同じです。

tJKが彼の記事で指摘しているように： http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

より良い選択肢

Floatを含む要素に幅を適用できる場合は、次を使用するのが最善のオプションです。

display: inline-block;width: <any explicit value>;

それは公平だと思います。パディングが必要な100％の要素でも、box-sizingと組み合わせて実行できます。

.clearfix {
  display: inline-block;
  width: 100%;
  *width: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
10
clairesuzy

overflow:hiddenは非常に「強力」です（私は数年間使用しており、Davidの言ったことに同意します）が、同時に問題が発生します。つまり、コンテナ内にドラッグアンドドロップする必要のある腹筋要素がある場合、コンテナの外ではそれらを見ることができません。この特定のケースでは、uはその「clearfix」トリックを使用する必要があります;）

8
stecb

はい、それは CSS Display L によって「非推奨」です：

flow および flow-root内部表示タイプ を作成して、フローレイアウトをより適切に表現します 表示タイプ そして要素をa [〜＃〜] bfc [〜＃〜] ルートにするための明示的なスイッチを作成します。 （これにより、この目的を達成することを目的とした::after { clear: both; }やoverflow: hiddenのようなハックの必要性がなくなるはずです。）

だから今、適切な方法は

display: flow-root;

残念ながら、これは最近追加されたものであるため、ブラウザはまだ実装していません。

2
Oriol

私は何年もの間overflow: hiddenメソッドを推奨してきました。広くサポートされています。

1
Quentin

Clearfixingが廃止されたとは言えません。ただし、現在使用されているclearfixのほとんどのバージョンは古くなっていると言えます。

専門家によると 、これはあなたが今日使うべきバージョンです：

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
1
user5803163

私は最近、嬉しい驚きにoverflow:hidden最近は完璧に機能します。私は約6か月前までclearfixメソッドを使用していましたが、比較するとかなり肥大化しています。

1
Finbarr

注意： テストするだけの場合は、正しいDOCTYPEが設定されていることを確認してください。私を数回捕まえました、そして私はいつも忘れます！

たとえばIE9では、上部に<!DOCTYPE html>がないと次のように機能しません。

<!DOCTYPE html>
<html>

<style>

#bottom_panel {
    overflow: hidden;
    background: orange;
    border:1px solid red;
}

#bottom_panel .col1 {
    background: red;
    float: left;
    width: 100px
}

#bottom_panel .col2 {
    background: yellow;
    float: left;
    width: 70px
}

#bottom_panel .col3 {
    background: green;
    float: left;
    width: 150px
}

.clear {
    clear: both;
}

</style>

<div id="bottom_panel">

    <div class="col1">this is col 1</div>
    <div class="col2">this is col 2. It's taller than the other columns because it's got more text in ot</div>
    <div class="col3">this is col 3</div>

</div>

<div>
This should not be floating around! Should be underneath the columns!
</div>

</html>
1
Simon_Weaver