0

フロートの問題が発生し、コンテナの外にフロートします。

この問題でクリアを使用できることは知っていますが、クリアが何をしているのか、問題を解決するためにどこに行けばよいのか、よくわかりません。

使用できるように明確なクラスを作成しました<br class="clear" />

問題のあるライブサイトはここで見ることができます：

http://www.rubytuesdaycreative.co.uk/testsite/shop.html

4

4 に答える 4

4

float「横に移動し、この要素に続くコンテンツを横に表示する」という意味です

clear「私の前に何かが浮かんでいるなら、その下にとどまる」という意味です。

clearフローティングコンテンツの後に、コンテナ内に表示される高さゼロの要素を設定することで、コンテナをフローティングコンテンツの周囲に展開させることができますがclear: both、この問題を解決するための最もクリーンなアプローチではありません。

overflow: hidden代わりにコンテナに設定してください。これにより、新しいブロックフォーマットコンテキストが確立され、フロートされた子を含むようにコンテナが拡張されます。

于 2012-10-14T21:38:28.120 に答える
1

クリアは、他の人が侵入しているdivで使用されます。したがって、div1の一部がdiv2に入り、div 1がdiv2の左側にある場合は、div2にclear：leftを挿入します。

于 2012-10-14T21:38:28.417 に答える
1

問題を修正するには、にを追加overflow:hiddenし#contentます。

#content {
    margin-top: 60px;
    text-align: center;
    overflow: hidden;
}

これは唯一の可能な解決策です。ヒントと同じように：http ：//www.quirksmode.org/css/clearing.html

あなたの質問へ：フロートをクリアするためにドキュメントにマークアップを追加することはお勧めしません。それは悪い習慣です！非常に一般的で安定したソリューションは、NicolasGallagherによって導入されたマイクロクリアフィックスハックです。クラスを1つ追加するだけで、#content準備が整います。

于 2012-10-14T21:47:06.150 に答える
0

最後のfloat要素の後のclear: bothブロックレベル要素（のような）に適用する必要があります。divこのようにして、クリアされた要素はすべてのフロート要素の下に配置され、コンテナの下部を押し下げてそれらを覆います。

于 2012-10-14T21:36:25.650 に答える