問題タブ [clearfix]

余分なマークアップなしでフロート要素のセットをクリアフィックスする方法を見つける必要があります。

たとえば、に2列のグリッドがありsection#main_featuresます。それぞれdiv.featureが持っておりwidth: 50%、ですfloat: left。私が欲しいのは、余分なhtmlマークアップなしで行をクリアフィックスする方法を見つけることです（単純なセマンティックグリッドを作成したいので）。

ここでの行は単なる「概念」であることに注意してください（各行は2つ.featureです）。私はこのグリッドを構築するためにセマンティックアプローチを使用しているので、各行の列をラップしてからこのラッパーをクリアフィックスする必要はありません。css（またはscss、lessなど）のみを使用して行をクリアフィックスおよびブレークするためのトリックを探しています。

この問題は見た目よりも複雑なようです。

前もって感謝します。

1. 使ってみませんdisplay:blockか？
2. さらに、なぜそれが疑似クラスにも適用されるの::beforeですか？

ここのコミュニティは、古い「clearfix」ハックが減価償却され、overflow:hidden. 残念ながら、この方法を使用しても問題が発生する場合があります。(例:正しく機能した場合、これは次のようになります。)

旧式を使用することの主な問題は、プレゼンテーションを変更することのみを目的として要素を<div class="clear">作成することです。これは、純粋なセマンティック マークアップの理想をプレゼンテーションで混乱させているようです。div

ただし、それ以外は、すべてのブラウザーおよびすべての状況でうまく機能するようです (これは "clearfix" や とは言えませんoverflow:hidden)。

を使用することの他の欠点はありますclear:bothか? そんなに使い勝手が悪いのでしょうか？それとも単なる個人的な好みですか？

私が取り組んでいるウェブページがあります。途中にコンテンツがない場合は、見栄えがします。最近、中央の列にコンテンツを追加しようとしたときに問題が発生しました。人々が答えなければならない質問の長いリストを含むテーブルを追加しています。問題は、このコンテンツがウィンドウサイズより大きくなると、コンテンツに対して下にスクロールしますが、サイドバーは同じサイズのままであるということです。

以下のコードをjsfiddleに添付しました。どんな助けでもいただければ幸いです。:)

http://jsfiddle.net/qp5Zk/3/ 1

clearfixの試行に失敗しましたが、何か問題が発生している可能性があります。または、適切な解決策ではない可能性もあります。

ページにこのレスポンシブレイアウトがあります。は<aside>一定の幅で、.main領域には がありmargin-rightます。.mainこれを行うのは、エリアをさまざまなデバイスに適応させながら、<aside>一定のままにしたいからです。

http://jsfiddle.net/c6mZN/1/

ご覧のとおり、問題は、メイン領域内に clearfix も使用するオブジェクトのリストがあり、最初の要素がサイドバーの最後までオブジェクトをクリアすることです。私が欲しいのは、それが残りの部分とまったく同じように見えることです.block

どうすればこれを達成できますか？

親（ul）に明確な修正を適用していますが、機能していません

display：blockを設定すると; に、その後、明確な修正が機能しますが、なぜですか？ここのコード

HTML

CSS

Pytheasと呼ばれる既存のWordpressテーマを微調整しようとしています（その機能の簡単なビデオツアーについては、このページにアクセスしてください）。これは、ポートフォリオの表示を目的としたWPテーマです。ホームページにはスライドショーがあります。私の目的は、スライドショーを埋め込まれたPreziプレゼンテーションに置き換えることです。

ホームページの要素は（上から下に移動）：ヘッダー、メニュー、スライドショー、タグライン、ハイライト、投稿です。ただし、ホームページは奇妙なことです。編集ウィンドウに入力した可能性のあるコンテンツはすべて省略されます（代わりに、別のダッシュボードセクションにアップロードされた画像のみが使用されます）。

Prezi-Embedderプラグインが標準スタイルのデフォルト、ブログ、ページで機能することを確認しました。私の推測では、CSS要素が機能していると思います。

私の腸（そして少し嗅ぎ回る）は、CSSのこのビット（template-home.phpから）が役割を果たすかもしれないと言っています。具体的にはclearfix：

ここで、 StackOverflowコミュニティのメンバーであるあなたに目を向けます。追加のデータやコンテキストを提供するにはどうすればよいですか？

よろしくお願いします。

マットウォーレン

計算された幅が 0 であるが、幅 x のコンテンツを含む div の css clearfix にこのクラスを使用しています。

何が起こっているのかというと、このクラスを使用した後のクロムでは、div がそのコンテンツの幅を取ります。しかし、 firefoxでは、div はその親の幅を取ります。

div が両方のブラウザでそのコンテンツの幅を取るという動作であってはなりませんか? 何が問題になる可能性がありますか?

フローティング要素をすべてのコンテンツで拡張しようとして問題が発生しました。私はいくつかの調査を行いましたが、公式に困惑/疲れ果てています. 私はいくつかの clearfix 解像度、標準、マイクロ、およびインラインを試みましたが、基本的にこの投稿に記載されているすべてのものです。

私の理論：

1. 構文に問題があるか<div>、正しい場所に配置していません。
2. ラッパーを拡張できないように、コンテンツまたは投稿を処理しています。
3. 私は非常に特別なウィンドウ リッカーです。

マイコード

スタイルシート:

ウェブページ：

これは私がChromeで見ているものの画像です:

解決策、アイデア、リソース、ヘルプ、アドバイスをいただければ幸いです。

また、FLOAT テンプレートはある時点で廃止されるか、Web ページを設計するための最良の方法ではないことを読みました。それ以外の方法に関する提案やリソースも歓迎されます。

編集4/24/13

ページのソースを表示した後に受け取ったコードを追加します。

また、JS Binの複製。