2

前のセグメントからフロートをクリアするために a を追加していましたが、代わりに with floats を使用する方がシンプルでクリーンなため、を<div style='clear:both'></div>使用することを誰かが提案しました。overflow:auto<div>

問題は、私の Web サイトに奇妙な「色合い」があるというレポートを受け取ったことです。調査の結果、これは Firefox ではなく Chrome で発生し、これらの「影」は実際には非常に小さなスクロールバーであることが判明しました。

この jsfiddle http://jsfiddle.net/57HM3/4/でパーツを最小限に抑えようとしました。それらは右端にあることに注意してください (「結果」と表示されている場所)。1.1 ではなく 1.2 に設定すると、行の高さに関係しているようです。これはある種の既知の問題ですか (私は知りません)?

それらをクリアする他の方法があることは知っていますが、それらにはIE固有のコードが含まれますが、そうではありません。フロートをオーバーフローとしてdivを作成するだけで、そのままにしておきたいです（そして、これが機能しない場合は、余分なものを追加することに戻ります<div>

4

3 に答える 3

4

overflow:hiddenの代わりに追加します。これにより両方がクリアされ、スクロールは追加されません

于 2012-08-06T14:40:37.957 に答える
2

オーバーフローでモンキーしないでください。「クリアフィックス」ソリューションをお勧めします。これが私が使用するものです。各プロジェクトの最初からすべてのスタイルシートの一番上に置きます。

/* CLEAR-FIX */
.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

...ずっと前にブログから入手したので、どこにあったか思い出せません。

フロートで拡張する必要があるコンテナは、「clearfix」クラスを追加するだけで済みます。

<div class="test" class="clearfix">
    <div style="float:left">Hello</div>
    <div style="float:left">World</div>
</div>

ところで、なぜCSS でフロートが通常親の高さの一部としてカウントされないのか疑問に思っている場合は、以下を参照してください:

于 2012-08-06T14:51:04.187 に答える
0

overflow:autoコンテナのルールを保持したい場合は、クラスからルールをdiv削除してみてください。line-height.test

于 2012-08-06T14:53:14.003 に答える