2 列レイアウトをラップするという昔からの問題がありますdiv。サイドバーがフロート状態になっているため、コンテナーがdivコンテンツとサイドバーをラップできません。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Firefox の明確なバグを修正する方法は多数あるようです。
<br clear="all"/>overflow:autooverflow:hidden
私の状況では、正しく機能しているように見えるのは<br clear="all"/>、少し乱雑なソリューションだけです。overflow:auto厄介なスクロールバーが表示され、overflow:hidden副作用があるはずです。また、IE7 は動作が間違っているため、この問題に悩まされることはないはずですが、私の状況では Firefox と同じ問題が発生しています。
現在利用可能な方法の中で最も堅牢なものはどれでしょうか?
ベストアンサー1
作成するデザインに応じて、以下の Clearfix CSS ソリューションにはそれぞれ独自の利点があります。
Clearfix には便利な用途がありますが、ハックとしても使用されています。Clearfix を使用する前に、次の最新の CSS ソリューションが役立つかもしれません。
最新の Clearfix ソリューション
コンテナ付き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>
1 つの欠点は、外部要素で特定のマージンとパディングの組み合わせを使用するとスクロール バーが表示される可能性があることですが、これは別の親要素にマージンとパディングを配置することで解決できます。
「overflow: hidden」を使用するのも Clearfix ソリューションですが、スクロールバーは表示されません。ただし、これを使用すると、hidden包含要素の外側にあるコンテンツが切り取られます。
注:この例ではフロート要素はimgタグですが、任意の HTML 要素にすることができます。
Clearfix リローデッド
CSSMojo の Thierry Koblentz 氏は次のように書いています:最新のクリアフィックスがリロードされました。彼は、oldIE のサポートを廃止することで、ソリューションを 1 つの CSS ステートメントに簡素化できると指摘しました。さらに、display: block( の代わりにdisplay: table) を使用すると、clearfix を持つ要素が兄弟である場合に、マージンが適切に折りたたまれるようになります。
.container::after {
content: "";
display: block;
clear: both;
}
これは Clearfix の最新バージョンです。
⋮
⋮
古い Clearfix ソリューション
以下のソリューションは最新のブラウザには必要ありませんが、古いブラウザを対象とする場合には役立つ場合があります。
これらの解決策はブラウザのバグに依存しているため、上記の解決策がどれも機能しない場合にのみ使用してください。
大体年代順に並べています。
「Beat That ClearFix」は、最新のブラウザ向けの ClearFix です。
ティエリー・コブレンツCSS モジョzoom最新のブラウザをターゲットにする場合、 and::beforeプロパティ/値を削除して、次のように単純に使用できると指摘しました。
.container::after {
content: "";
display: table;
clear: both;
}
このソリューションは IE 6/7 をサポートしていません...意図的にです!
ティエリーは次のようにも述べています。「注意点: 新しいプロジェクトを最初から始める場合は、それを実行してください。ただし、この手法を現在の手法と交換しないでください。oldIE をサポートしていなくても、既存のルールによってマージンの折りたたみが防止されるためです。"
マイクロクリアフィックス
最も新しく、世界中で採用されているクリアフィックスソリューションであるニコラス・ギャラガーによるマイクロクリアフィックス。
既知のサポート: 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;
}
displayIEの「hasLayout」を設定するためにプロパティを使用する代わりに、他のプロパティを使用することができます。要素に対して「hasLayout」をトリガーする。
.container {
overflow: hidden;
zoom: 1;
display: block;
}
プロパティを使用してフロートをクリアする別の方法overflowは、アンダースコアハックIEはアンダースコアで始まる値を適用しますが、他のブラウザは適用しません。zoomプロパティはレイアウトありIEの場合:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
これは機能しますが、ハックを使用するのは理想的ではありません。
PIE: 簡単なクリア方法
この古い「Easy Clearing」方式には、より複雑な CSS を犠牲にして、配置された要素をコンテナーの境界の外側にぶら下げることができるという利点があります。
このソリューションはかなり古いものですが、Easy Clearing の詳細については、Position Is Everything で確認できます。http://www.positioniseverything.net/easyclearing.html
「clear」プロパティを使用する要素
何かを急いでまとめるときに使える、手っ取り早い解決策（いくつか欠点あり）:
<br style="clear: both" /> <!-- So dirty! -->
欠点
- レスポンシブではないため、メディア クエリに基づいてレイアウト スタイルが変更された場合、望ましい効果が得られない可能性があります。純粋な CSS によるソリューションの方が理想的です。
- 必ずしも意味的な値を追加することなく、HTML マークアップを追加します。
- CSS 内の「clearfix」の単一ソリューションへのクラス参照と HTML 内のそれへのクラス参照ではなく、各インスタンスのインライン定義とソリューションが必要です。
- これを回避するために、より多くのハックを書かなければならない可能性があるため、他の人にとってコードの扱いが難しくなります。
- 将来、別の Clearfix ソリューションを使用する必要があるときや使用したいときに、
<br style="clear: both" />マークアップの周囲に散らばっているすべてのタグを元に戻して削除する必要はありません。