2

フロートのグループをクリアする最も一般的な方法はclear:both;、親の:after疑似要素で使用することです。たとえば、次のようになります。

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

これはほとんどの場合問題なく動作しますが、浮動要素内に浮動要素がある場合は失敗します。子フロートだけでなく、すべてのフロートをクリアします。

追加することによる修正の可能な方法

.group {
    display:inline-block;
}

しかし、これには望ましくない副作用が生じる可能性があります。

ページ上のすべてのフロートではなく、子フロートのみをクリアする方法はありますか?

4

1 に答える 1

2

フロートをクリアするための私の好みの方法は、実際には、含まれている要素のoverflowプロパティをauto次のように設定することです。

.group {
    overflow: auto;
}

overflow: hiddenも機能します。

これにより、フロートされた子が強制的.groupにクリアされますが、ページ上の他のフロートはクリアされません。これはおそらくあなたが達成したいことだと思いますか？

この方法では、古いバージョンの IE でフロートを強制的にクリアできない場合があります (申し訳ありませんが、どのバージョンの IE か正確には思い出せません)。その場合はhaslayout、IE に対して強制する必要があります。明示的な幅をオンに設定すると、.groupそれが実行されます。しかし、ほとんどの場合、この方法は「うまくいく」と思います。

ここにデモがあります：http://jsfiddle.net/C7KWn/

于 2012-06-14T02:04:08.013 に答える