使外部div自动与其浮动内容相同的高度
我想要外部div ，这是黑色的包装它的div浮动在其中。 我不想在div使用style='height: 200px与outerdiv id，因为我想它是自动内容的高度（例如，浮动div ）。
<div id='outerdiv' style='border: 1px solid black;background-color: black;'> <div style='width=300px;border: red 1px dashed;float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width=300px;border: red 1px dashed;float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div>
如何做到这一点？
你可以设置这个outerdiv的CSS
#outerdiv { overflow: hidden; /* make sure this doesn't cause unexpected behaviour */ }
你也可以通过在最后添加一个元素来clear: both 。 这可以正常添加，与JS（不是一个好的解决scheme），或者:after CSS伪元素（旧IE不广泛支持）之后。
问题是容器不会自然地扩展到包含浮动的孩子。 在使用第一个例子时要注意，如果父元素之外有任何子元素，它们将被隐藏。 你也可以使用“auto”作为属性值，但是如果任何元素出现在外面，这将会调用滚动条。
你也可以尝试漂浮父容器，但根据你的devise，这可能是不可能的或困难的。
首先，我强烈build议你在外部CSS文件中做CSS样式，而不是内联。 维护起来要容易得多，而且使用类可以更加可重用。
通过Alex的回答（＆Garret的clearfix）“在最后添加一个元素来清除：both”，你可以这样做：
<div id='outerdiv' style='border: 1px solid black; background-color: black;'> <div style='width: 300px; border: red 1px dashed; float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width: 300px; border: red 1px dashed; float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> <div style='clear:both;'></div> </div>
这工作（但你可以看到内联CSS是不是很漂亮）。
您可能想尝试自动closures花车，详见http://www.sitepoint.com/simple-clearing-of-floats/
所以也许尝试overflow: auto （通常工作），或overflow: hidden ，如亚历克斯说。
我知道有些人会讨厌我，但我发现display:table-cell来帮助在这种情况下。
它真的很干净。
首先你不要使用width=300px ，这是标签不属于CSS的属性设置，请使用width: 300px; 代替。
我会build议在clearfix上应用clearfix技术。 Clearfix是一个通用的解决scheme来清除2浮动div，所以父div将扩大，以适应2浮动div。
<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'> <div style='width:300px; float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width:300px; float: left;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> </div>
这是您的情况的一个例子 ，以及Clearfix如何解决这个问题。
使用jQuery：
设置家长高度=儿童offsetHeight。
$(document).ready(function() { $(parent).css("height", $(child).attr("offsetHeight")); }
使用clear: both;
我花了一个多星期试图弄清楚这一点！
