コンテナの高さが更新されなかったのはなぜですか？

Question

最初に高さが 'auto'のコンテナdivに要素を追加しています。私は子供の要素が追加されるにつれてその高さが更新されると期待しています。しかし、実際にはありません。誰か助けてくれますか？私はちょうどコンテナのdivの高さが子供の高さに応じて更新されるようにします。

私はChromeのデバッグツールを使用しましたが、コンテナdivの高さはchildren divの高さよりも低くなっています。 子供のdivは浮動小数点です：左。

Answer 1

浮動小数点の子をdivに追加する場合は、親にoverflow:auto;が必要です。

また、別の要素を使用して浮動小数点をクリアすることもできます。clear:bothはこれを行います。

これは、フローティング要素がドキュメントフローから取り出されるためです。ここで

は、あなたが使用できるいくつかのテクニックを示す例です：http://jsfiddle.net/Tn5c3/

をCSS

#a, #b { 
    padding: 10px; 
    margin:10xp 
} 

#a { 
    background: #aa0000; 
} 
#b { 
    background: #00aa00; 
    overflow: auto; 
} 
p { 
    background: #0000aa; 
    padding: 5px; 
} 

.clear { 
    clear:both; 
    height: 50px; 
} 

JS

$('#bb').click(function() { 
    addChild($('#b')); 
}); 

$('#ba').click(function() { 
    addChild($('#a')); 
}); 


function addChild(parent) { 
    var child = $('<p>floated para</p>').css({ 
     'float': 'left' 
    }); 
    parent.append(child); 
} 

HTML

<button id='ba'>Add to A</button> 
<button id='bb'>Add to B</button> 


<div id='a'></div> 
<div class='clear'></div> 
<div id='b'></div>