問題タブ [clearfix]

CSS のフローティング効果をクリアするために clearfix を使用していましたが、あまり良い手法ではなく、別のものを使用するように言われました。本当？

もしそうなら、私のCSSを検証する他の選択肢はありますか?

どうもありがとう

私は今日、職場でこの異常な Firefox のみの CSS バグに遭遇しました (私の知る限り、Safari と Chrome のみをチェックし、Firefox 3.6 を使用していました)。 :

これは、問題がどのように見えるかのスクリーンショットです

したがって、ここで通常予想されることは、2 つ<div>の の間、または の上にマージンがない<ul>ことです。実際、Firebug の要素にカーソルを合わせると、マージン/パディングの色が表示されません。しかし、何らかの理由で、 の 30px のマージントップがと、それを含む<p>の両方に適用されて います。私の推測では、clearfix には何かバグがあると思います (実際、 clearing を使用すると、この問題は解消されます)。ありがとう！<p><div><br/>

cleardisplayOutlook 2007/2010、および（および他の多くのCSSプロパティ）では機能しません。何を使うべきですか？

Lotus Notesを除いて、このマトリックスのすべてのクライアントをサポートする必要があります。

参考：私は、テーブルを使用してすべてのグリッドベースのマークアップを構築しているXSLを使用しています。ただし、どういうわけか別のテーブルユニット（Outlook 2007/2010のみ）とオーバーラップしているテーブルユニットがあります。

この html ヘッダーのメインdiv (紫)があり、ロゴ(赤)と右側のその他の情報(緑)を含む 2 つの他の div に分割されます。

赤と緑の両方をうまくフロートさせる紫の明確な修正があり、両方とも左にフロートされます。

ここでの問題は、緑を幅全体に合わせる方法を見つけるのに苦労していることです

この場合、赤自体は幅が固定されており、緑199pxの幅宣言はありません

外側の紫色のdiv にも固定幅はありません。現時点では、流動的なレイアウトを持つ の65%です。body

だから私の質問は、cssで紫の終わりまで緑を拡大する方法ですか? div div

緑width:86%にを適用しようとしましたが、赤には固定値があるため機能しませんでした...

問題を解決できるテーブル表示モードなどがあるのではないかと思いdisplay:table-cell/table-rowましたが、どれも思い通りに動作しないようでした。

あなたがそれについて私を助けることができれば、それは素晴らしいことです:)

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

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

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

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

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

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

現在、スライス時にすべてのタグに「float:left」を使用しています。どうしたの？

長所は、「ハックのクリア」をまったく行う必要がないことだと思います。

私の下手な英語でごめんなさい。

ここで、clearfix のかなり異なる方法を見ました: http://www.marcwatts.com.au/blog/best-clearfix-ever/

clearfix を自動化し、クリアしたい要素に「clearfix」または同様のクラスを追加する必要がない次の CSS コードを追加することを提案しています。

この方法に欠点はありますか? これにより、必ずしも clearfix を必要としない要素を clearfix することになるのでしょうか? それとも、これがあらゆる状況を説明するような規則ですか?

私は現在 .clearfix:after を取得しようとしています (そして失敗しています) .clearfix:after の詳細はスタック hereであり、Chrome と Firefox で動作するすべてが位置にあります。

私の理解では、クリアする必要があるフロートを含む要素に .clearfix クラスを追加する必要があります。ただし、その方法を試してみると、修正が機能しません。

私が台無しにした場所と、.clearfix クラスを正しく適用する方法を誰かが指摘できますか?

助けてくれてありがとう！

関連する CSS は次のとおりです。

HTML は次のとおりです。

960グリッドのクリアフィックスとHTML5ボイラープレートのクリアフィックス-違いは何ですか？

NathanSmithの960グリッドのcssにあるclearfixは次のとおりです。

そして、これがPaulIrishのHTML5ボイラープレートにあるclearfixです。

ご覧のとおり、それらは非常に似ています。しかし、それらは異なります。

誰かがこれについて何か洞察を持っていますか？

どちらが良いのか、そしてその理由は？

Web アプリケーションを変更するスクリプトがいくつかあります。基本的には次のとおりです。

1. 動的要素を DOM に追加する
2. ウィンドウの高さなどに合わせていくつかの DOM 要素のサイズを変更します...

私もです：

しかし、 の適切な高さの値が得られません$('.column').height。clearfixスクリプトは、要素を追加しなかったかのように高さの値を取得します。最終的な高さを計算するときにその部分を考慮していないようです。

遅延オブジェクトでも試しましたが、成功しませんでした。clearfix要素を考慮せずに高さを取ります。

CoffeeScript 以外の人のために、ここに生成された Javascript を貼り付けます。

それを修正する方法はありますか？