html - 如何使用浮动内容使 div 可扩展

Question

我想设计一个可扩展的div，它应该根据里面的内容进行扩展。内容有两个divs，向左浮动，每个都有固定的宽度。这些divs 本身可以根据其文本内容进行扩展。最后，它们是div父级中的一个，div这些divs 意味着两个清除两个浮点数。然而，父级div并没有扩展到包含子div级，尽管我认为应该这样做，因为所有元素都是相对定位的，而不是绝对定位的。如何实现扩展？小提琴位于http://jsfiddle.net/Cupidvogel/y79NS/1/。

Answer 1

如果我理解你可以尝试添加overflow: hidden;类.main风格。

Answer 2

将 float:left 添加到您的主 div ".main" （这样做您将不再需要 clear:both div，因为现在所有元素都是浮动的）

http://jsfiddle.net/y79NS/4/

您仍然可以像在示例中一样使用 clear:both 属性，这样您就不需要将 float:left 添加到主 div 中，但是您将 clear div 放在错误的位置。这应该放在浮动右侧 div 内，或者您可以删除 .clear div 并使用 ":after" 清除 div：

http://jsfiddle.net/y79NS/5/

这是一个链接，可以解释为什么会这样。