12

次のことを考えると

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}
<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

（http://jsfiddle.net/ericjohannsen/JCPEH/1/を参照）

container明らかに領域がない（つまり、高さがゼロで、境界線がない）のはなぜですか？私はそれが含まれている子供と同じくらい背が高いことを素朴に期待してdivいました。

div2人の子供を収容するのが子供と同じくらい背が高くなるようにこれを設定する適切な方法は何ですか？

4

5 に答える 5

20

フロートをクリアする必要があります。clearfix クラスを介してこれを行うことができます。

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}
<div id='container' class="clearfix">
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

またはクリア要素:

.clear {
  clear:both;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}
<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
    <div class="clear"><!-- --></div>
</div>

フィドルの更新: http://jsfiddle.net/JCPEH/5/

于 2013-02-07T19:07:06.283 に答える
4

これは、floatsそれらがクリアされるまでレイアウトの一部ではないためです。

于 2013-02-07T19:06:33.160 に答える
1

他のfloatいくつかの「コマンド」（位置相対/絶対/修正など）と同様に、通常のレンダリングフローから要素を削除します。
1 つの結果として、親要素のレンダリング方法に影響を与えなくなりました。

あなたはここで自分自身を啓発することができます

于 2013-02-07T19:07:00.620 に答える
1

大きな div を閉じる前に a を追加し<div id="clear"></div>、css に #clear{clear:both;} を追加します。

于 2013-02-07T19:07:01.697 に答える
0

コンテナの位置を絶対に設定すると、問題が解決します。http://jsbin.com/ifojug/1/何らかの理由で jsfiddle が私のブラウザで動作しません

于 2013-02-07T19:09:33.703 に答える