爲什麼容器div高度沒有更新？

Question

我將元素添加到最初高度爲「自動」的容器div中。我期望它的高度將隨着子元素的添加而更新。但是，實際上不是。有人能幫助我嗎？我只是想根據孩子的身高來更新容器的高度。

我用鉻調試工具，容器div的高度小於兒童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>