CSSを浮かせるフロート

Question

私は自分のhtml構造をプレゼンテーションから切り離そうと努力していますが、時にはハックや回避策の複雑さを見てクロスブラウザーで動作させると、私は巨大な集合体これに入れられる生産的な時間の無駄。

私が理解しているように、レイアウトを作成するためのフロートは決して作成されませんでしたが、多くのレイアウトにはフッターが必要なので、よく使用されています。浮動小数点をクリアするには、両側をクリアする空のdivを追加します（div class = "clear"）。これはシンプルでクロスブラウザーでも動作しますが、CSS内のプレゼンテーションの問題を解決するのではなく、「非セマンティック」htmlを追加します。

私はこれを実現しますが、利点と欠点を持つすべてのソリューションを見た後、さまざまなCSSを含む別々のスタイルシートを作成するのではなく、空のdiv（ブラウザ間で予測可能な動作）ハックや回避策など、CSSの進化に伴って変更する必要があります。

o.kですか？あなたが何をやっているのか、なぜそれをやっているのか理解している限り、これを行うには？ CSSプレゼンテーションツールが提供されていても、そのような基本的なレイアウトの問題を処理できるようになっても、CSS回避策、ハック、プレゼンテーションとは別の構造を見つける方が良いでしょうか？

Answer 1

ユアーズ正しいアプローチである：CSS 2.1をサポートしていないIEのバージョンでは、hasLayoutは、所望の効果を持つことが起こります。ルールは、それらを理解していない人のために作成されます。あなたがすべての賛否両論を知っているなら、あなた自身の電話をしてください。

この場合、特に正当な理由があります。CSSはコンテンツAをコンテンツBから水平に分離するという共通の希望を無視することにしたので、あなたが嫌い​​なハックを選択する必要があります。私はすでにここに示した3つのソリューションを比較します。

• あなたの解決策は、AとBの間の視覚的な分離だけである要素Cを挿入して、文書の内容を変更したためです。コンテンツはレイアウト目的に役立ちません。
• Karpieの解は、私の本ではやや悪いですが、それは同じように邪魔になるからです。疑似要素 "：after"はそのために設計されていません。しかし、HTMLを実際に変更することはないという大きな利点があります。
• PorneLの解決策は、Aのラジカル変化によってAとBとの間の所望の分離を達成する。この変化は、AをBから分離するだけでなく、先行する内容からAを分離し、Aの幅を計算するなどである。もちろん、時にはそれは完全にOKですが、予期せぬ副作用に気付かなければなりません。

私たちの選択は私たちです。

Answer 2

私は間違いなくdivをクリアするために余分なマークアップを使用するという考えには同意しません。

私は 'グループ' アプローチ好む - 以下のCSSで、親のdivにclass="group"を置くことを：

/* Clear groups of floats by putting class="group" on their parent */ 
.group:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

そして、IE6/7のためのIE固有のスタイルシートで：

/* IE7 */ 
.group 
{ 
    min-height: 1px; 
} 

/* IE6 */ 
* html .group 
{ 
    height: 1%; 
} 

これはAndy BuddのCSS Masteryで詳述されています。セマンティクスは少し拡張されていますが、意味があります。浮動小数点型のdivをグループ化していて、明らかに互いに関係しています。

編集：私はこれを巨大なハックや回避策のいずれかとは考えていません - この方法は様々なインカネーションで長年にわたって行われてきました（通常は 'clearfix'メソッドとして知られています）。近いうちに。

Answer 3

ほとんどの場合、Clearfixは不要で、一般的なバージョンのハックは不必要に冗長で複雑です。

overflow:hiddenを容器に塗ることで、効果を得ることができます。コンテナの高さが固定されていない場合は、とにかくコンテンツのサイズに伸びます。これはハックではなく、すべてのブラウザで動作するspecified behaviorです。

そして、あなたは本当にoverflow:visibleが必要なときにすることができますマークアップ内の余分な要素なしまだ明らか：

.container::after { 
    content:""; /* not "."! */ 
    display:block; 
    clear:both; 
} 

、それは完全に標準のCSS 2.1のです。

.container { 
    zoom:1; 
}