49

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

これを修正するための1つのアプローチは、コンテナが適切に引き伸ばされることを保証するためにいくつかのCSSルールを追加する「clearfix」です。

ただし、コンテナoverflow: hiddenを指定するだけでも同様に機能し、ブラウザとの互換性も同じように見えます。

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

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

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

4

8 に答える 8

32

あなたはほとんどいつも使うことができますoverflow: hidden。

ただし、例外があります。1つの例を次に示します。

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

そこにあった質問：

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

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

それはclearfixが唯一の選択肢であると言っているわけではありません-display: inline-blockその例をきれいに修正します：

http://jsbin.com/ubapog

于 2011-04-06T12:10:07.323 に答える
10

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

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

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

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

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

例

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

要素のマージンはpre他の要素と同じように反応しないことに注意してください（したがって、テスト中に同じ画像を表示するには、マージンの代わりにパディングを試してください）。また、IEにマージンが適切に含まれない別のIE「foible」もあります。それらは明示的に指定されておらず、デモでは明示的なマージンがありますが、そのページのTJKによってデモされたように、すべてのものがclearfixed要素に等しいとは限らず、通常のブロック要素にマージンを人為的に封じ込めていますh2。pブラウザはとにかくこれを異なる方法で行うため、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;
}
于 2011-04-06T12:05:00.693 に答える
8

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

于 2011-04-06T11:42:00.723 に答える
2

はい、 CSS Display L3では「非推奨」です：

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

だから今、適切な方法は

display: flow-root;

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

于 2015-08-12T01:20:48.077 に答える
1

注：テストするだけの場合は、正しい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>
于 2011-04-27T05:09:10.657 に答える
1

私は長年このoverflow: hidden方法を推奨してきました。広くサポートされています。

于 2011-04-06T11:38:44.307 に答える
1

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

于 2011-04-06T11:47:36.793 に答える
1

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

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

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
于 2016-01-18T05:24:17.047 に答える