0

現在、CSS フローティング要素をクリアする最良の方法と考えられているものは次のとおりです。

  • HTML マークアップをセマンティックに維持し、不要な要素をできる限り排除します。
  • 大部分のブラウザーで確実に機能する、クロスブラウザー、クロスプラットフォームのソリューションでしょうか?
4

4 に答える 4

3

これはグラフィックデザインの問題ではありません。これは CSS であるため、StackOverflow に属します。

とはいえ、HTML をきれいに保つための答えは、単純に親にオーバーフローを与えることです。したがって、マークアップが次の場合:

<div class="wrapper">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

ラッパーにオーバーフローを与えることができます：

.wrapper {overflow: auto}

そして今.wrapper、両方のフロートが含まれます。

通常はこれで十分です。

場合によっては、古い IE では、コンテナーにも幅が必要になります。

于 2011-11-01T19:18:23.137 に答える
1

これをもっと複雑にすることもできますが、簡単な方法は、次の属性を持つ .clearfix という名前のクラスを CSS に追加することです。

.clearfix {clear: both;}

次に、クリアしたいものの下にタグを挿入します。

タグを定義するためのより現代的な方法については、Google の clearfix を使用してください。

于 2011-11-02T16:46:24.600 に答える
0

少しトリッキーですが、最新のブラウザではうまくいきます:)

.wrapper::after {
    content:"";
    clear:both;
}
于 2011-11-03T18:58:27.203 に答える
0

これについて私が見た最良の方法は、最新のブラウザーでは :before & :after 疑似要素を使用し、古いバージョンの IE では zoom: 1 を使用することです。

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

詳細はこちら: http://nicolasgallagher.com/micro-clearfix-hack/

于 2011-11-04T13:11:31.200 に答える