5

フローティング HTML 要素は、コンテナの高さを拡張しないようです。たとえば、次のコードを考えてみましょう。

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}
<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

灰色の背景を持つ包含 div が赤い div よりも短く、赤い div がコンテナの境界の外に伸びていることに注意してください。フローティング要素を含め、包含要素をそのコンテンツのサイズに拡張したいと思います。

これを達成するためのエレガントなソリューションはありますか?

4

6 に答える 6

16

overflow: auto包含要素を追加します。

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
    overflow: auto;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}
<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

参照: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats

于 2009-02-19T13:29:55.513 に答える
9

はい。divが閉じるときにフロートをクリアする必要があります。

<div>
  <div style="float:left">Floated Div</div>
  <div style="clear:both;" />
</div>
于 2009-02-19T03:37:52.363 に答える
4

フロートをクリアする必要があります。これにより、ドキュメントフローが通常に戻ります。フローをリセットする必要がある最後の要素で使用しますclear:left（または、そのようなフロートをクリアする必要がある場合は、その両方を使用します）。ClearFixについても読んでください。ClearFixはIEに少し粘着性があることに注意してください...マークアップを制御できる場合は、従来のクリアを使用する方が安全な場合があります。

于 2009-02-19T03:33:04.153 に答える
1

フロートをクリアする必要があります クリアフィックス

いくつかの詳細情報

于 2009-02-19T03:33:24.963 に答える
1

ClearFix のようなハックを使用しないことを強くお勧めします。「セマンティック」ではないために <div class="clear"></div> を保存しようとすると、後で問題が発生することになります。レイアウトが変更されないことがわかっている場合、または次の要素が何であるかが確実にわかる場合は、次の要素を使用して前の「フロート」をクリアできます。さまざまな場所に挿入できる HTML のようなモジュールが必要な場合は、常にクリア DIV を追加してください。

また、デビッドのコメントに関して：

<div style="clear:both;" />

これは有効な HTML または XHTML ではないので注意してください。XML の観点からは有効に見えますが、ドキュメントの定義 (DOCTYPE タグによって参照される名前が何であれ) を尊重しません。つまり、DIV は、個別の終了タグで開始および終了する要素として定義されます。たとえば、「自己閉鎖」を可能にする <BR/> とは対照的です。確かに、Firebug やおそらく他の Web 開発者ツールは、DIV をそのように表示することがありますが、それはまさにそのように表示する方法です。

PPS: 私の仕事では、これが一部のレイアウトでうまく機能し、IE6 や他のブラウザーで DIV をクリアするときに、要素間の一貫性のない垂直方向の間隔を修正することがわかりました。

クロスブラウザクリア:

div.clear { clear:both; overflow:hidden; height:0; }

<div class="clear"></div>

これにはインライン スタイルを使用しないでください。まず、頻繁に必要になります。次に、上で見たように、クリア ルールを変更してクロス ブラウザの問題を修正すると便利な場合があります。

于 2009-02-19T22:43:38.287 に答える
0

VistaのIE7で正常にレンダリングされます。IEのどのバージョンとどのプラットフォームを使用していますか？

于 2009-02-19T03:34:39.750 に答える