問題タブ [clearfix]

私が取り組んでいるレイアウトでは (そしてほとんどの場合それ以外の場合)、div にフロートされた子を含めたくない場合は考えられません。したがって、clearfix クラスを必要なすべての要素 (主にコンテナー div) に追加する代わりに、すべての div を既に clearfix されているようにしない理由を考えています。

これにはデメリットはありますか？現在のレイアウトをテストしている間は何も見えませんが、知識のある人は私よりもよく知っているかもしれません.

私が直面している奇妙な問題があります。CSS-Tricksで説明されている単純な CSS clearfix ハックを使用してフロートをクリアしています。コードスニペット：

ただし、上記のコードを追加すると、Chrome と Safari でテキストが見えなくなります。現在、いくつかのデバイスでテストしましたが、毎回同じ結果が得られましたが、これが何かを壊す理由がわかりません. ただし、Firefox

動作中のバージョンはここで、壊れたバージョンはここで見ることができます。ページのソースを調べると、唯一の違いは、上記のスニペットがコメントアウトされていることです。

問題のスクリーンショットhttp://cl.ly/image/3h1s0Q31473Q

しばらく調べてみましたが、この問題についての言及は他にありません。すべてが Firefox で正常にレンダリングされます。

前もって感謝します、

-ザック

もう少しcssとhtmlを学ぶためにウェブサイトを作っています。

IEの誰かに見せようとするまではうまくいったと思いました（私はffを使用しています）

ページを読み込んだとき、フッターが間違った場所にあるように見え、理由がわかりません。これがスクリーンショットですhttp://www.flickr.com/photos/mattcripps/8300226269/

あなたはここでウェブサイトのコードを見ることができます http://www.deltacars.co.uk/testsite/

これはmtを真っ向からやっているので、どんな助けも素晴らしいでしょう。

clearfix に問題があります...使用すると、div のセンタリング (マージン 0 自動) が削除されます。したがって、これを例として使用すると、「コンテナ」div は「ヘッダー」内で中央に配置されるのではなく、左にフロートされます。「一部のコンテンツ」は、高さが定義されていないフローティング アイテムです。この時点で使用できるのは clear = display: block; のみです。クリア: 両方; 高さ: 0; 幅:100%; 最後に div でそれらを正しくクリアします。

何が問題ですか？

例 ：

ページに画像のサムネイルを追加および削除するために、PHPによって動的に制御される単純な画像ギャラリーがあります。私が抱えている問題は、その行にスペースがなくなり、別の行を開始するように強制されるまで、画像を隣り合わせに配置したいということです。

私はこれを使用してみfloat:leftましたが、画像を含まないように高さが自動サイズ変更された包含ボディdivを使用しました。次に、body divの問題を修正した画像に追加clear:both;してみましたが、画像がすぐ下にあります。

私はfloat:left以前に多くの場合使用しましたが、含まれているdivの高さは固定されていました。

誰かが私がこれを修正する方法について何か考えがありますか？

ヒープに感謝します:)

clearfix を実装する 2 つの最良の方法は、Nicolas Gallager のマイクロバージョン .cf { *zoom: 1; }を使用するか、または を使用することoverflow: hiddenです。

しかし、修正するものが何もない場合、clearfix を使用する必要がありますか? （しゃれが意図されています。）

言い換えれば、セマンティックな理由で、articleまたはsection単にセマンティックな理由でコンテナーがあり、背景や視覚効果 (この例で求められているようなもの) がなく、内部にフロート要素がある場合でも、それを clearfix する必要がありますか?

なぜ私は尋ねるのですか？

Web インスペクターでコンテナーを表示しても、コンテナーが強調表示されないため、明らかに何かが間違っています。たとえば、目に見えないスリザーです。

(また、Web サイトを 3D で視覚化するFirefox Tiltでは、Web サイトを 90 度回転させたときに、コンテナー ブロックがあるべき場所に空きスペースができます。)

しかし、それは問題ですか？

これまでの私の推論：

確かに、将来的にビジュアル/レイアウトの目的でコンテナーを使用することにした場合、適切に動作していないことがわかり、その場合は clearfix ハックを適用することになります。しかし、他に考慮すべきことは何ですか？

私はCSSこれを正しくするためにインラインで試みているだけで、終了したらそれを私の「スタイル」ファイルに移動します。私が試みているのは、すべての画像とラジオボタンを周囲にインライン化する必要がありますDIV。私ができないことは、それらを高さ方向に中央に配置することです。ご覧のとおり、最初のラジオボタンでマージンボトムを試しましたが、何もしません。私は何が間違っているのですか？どこかにクリアフィックスが必要かもしれませんか？

コンテナー div 内に 2 つの div を作成したいと考えています。左の div には、ニュースの日付、タイトル、ニュース コンテンツが含まれ、右の div には、ニュース投稿に関連するメディアを含むドロップダウン ボタンとボックスが含まれます。

これは

問題は、newsleft と newsright がフローティングしていて、ページ コンテンツの高さが増加していないことです。CSS ドキュメントに高さを手動で配置したくありません:S 私を助けてくれる人はいますか?

ありがとう、ウィル・ライアン

HTML/CSS で実現する非常に特殊なレイアウトがあります。基本的に、いくつかの左フローティング ボックスを含むテキスト コンテナーがあります。次に、このテキスト コンテナーを下部に数ピクセル重ねる必要があるフッターがあります。これを達成するには、フッターに負の上部マージンを使用しposition:relative、テキスト コンテナーとフッターに z-index を設定して、テキスト コンテナーの上にフッター レイヤー スタックを作成します。

フィドルで最もよく実証できます: http://jsfiddle.net/sW9cu/2/。

問題は、IE9 と Firefox 18 ではフッターのコンテンツがテキスト ボックスのコンテンツをクリアするのに対し、Chrome ではフッターのコンテンツがテキスト ボックスのコンテンツをクリアせずにオーバーレイすることです。

基本的に、IE7+、Firefox、および Chrome で何らかの方法で一貫性を保つ必要があります。どちらの方法でも構いません - クリアまたはオーバーラップのいずれかですが、ブラウザに関係なく同じように動作する必要があります。

なぜこれを行っているのか、それを修正する方法を誰でも見ることができますか? テキスト コンテナーで使用しているマイクロ クリア フィックスに関係している可能性がありますが、よくわかりません。

指摘してくれてありがとう-これは私を困惑させました!

私のウェブページ（連絡先ページ）を見て、clearfixクラスでこの問題がまだ発生している理由を教えてください。私はすべての要素で両方のクリアを使用しましたが、それでもこれは起こっています！そして、＃bizleftと#bizrightは整列していません！

http://ghazalphoto.com/contact/

ありがとう