web-dev-qa-db-ja.com

外側のdivの境界が要素のレンダリングされたコンテンツに依存しないのはなぜですか？

理解できない問題があります。 divを別のdiv内にネストし、外側のdivに境界線を付けたい場合、境界線はレンダリングされたコンテンツをラップしません。内側のdivのコンテンツは数行の高さであっても、外側の境界線はパディングがある場合はそれを追加するだけです。

CSS：

.wrapper {
 width:550px;
 border: 1px solid #ccc;
 clear:both;
 padding: 5px;  
}
.content {
 float:left;
 width:250px;
 background-color:#e1e1e1;
}

HTML：

<div class="wrapper">
<div class="content">
    text<br>
    text<br>
    text<br>
</div>
<div class="content">
 pic
</div>
css
5
Linda Jensen

要素にフロートされた別の要素が含まれている場合、最初の要素には2番目の要素が含まれていないように見えます。受け入れられたソリューションは機能しますが、レイアウトの問題を解決するために追加のマークアップが必要になるため、私はそれが好きではありません。

私の目では、とにかく-より好ましい解決策は、親のオーバーフローを自動に設定することです：

.wrapper {
    overflow: auto;
}

これにより、親要素に子要素が「含まれ」ます。

4
Grant Palin

それはフロートのためです。 </div>終了タグの前にそれらをクリアする必要があります。これを試して：

<div class="wrapper">
    <div class="content">
        text<br>
        text<br>
        text<br>
    </div>
    <div class="content">
         pic
    </div>
    <br style="clear: both;">
</div>
2
John Conde

追加のマークアップなしでフロートをクリアするには、overflow：hiddenを使用します

.wrapper {overflow:hidden;zoom:1;}

Zoom：1は、ie6で hasLayout を呼び出すため、ie6ではフロートがクリアされます。

1
Emily

ここにフロートのクリアに関するかなり広範囲な記事があります： http://www.positioniseverything.net/easyclearing.html

また、追加のマークアップを使用しないことをお勧めします。代わりに、フロートをクリアするたびに追加する単純なcssクラスを使用します。

0
andrej