为什么包含 div 不能识别其中项目的高度？ [复制]答案

【问题标题】：why does the containing div not recognize the height of the items within? [duplicate]为什么包含 div 不能识别其中项目的高度？ [复制]
【发布时间】：2011-04-13 09:19:53
【问题描述】：

我的包含 div (boxes_blue) 如何识别其中项目的高度？

#boxes_blue {
display: block;
margin: 0 0 0 175px;
border: 1px solid brown;
clear:  both; 
}

#boxes_blue_each {
float: right;
height: 100px;
width:  100px;
padding: 10px;
border-left: 3px solid #fff;
background-color: #004964;
color: #fffacf;
text-transform: uppercase;
text-align: left; 
}

<div id="boxes_blue"> <div id="boxes_blue_each">one</div> <div id="boxes_blue_each">two two</div> <div id="boxes_blue_each">three three three</div> <div id="boxes_blue_each">four four four four</div> </div>

【问题讨论】：

很遗憾关闭并重定向到标题完全不同的问题。如果提问者对 clearfix 的了解足以通过名称搜索它，他们可能就不需要问这个问题了。

标签： css html xhtml height css-float

【解决方案1】：

发生这种情况是因为包含的所有 div 都是浮动的。

我不确定为什么会这样，但我知道一些解决方案。将包含的 div 设置为“overflow:hidden”，或者在浮动 div 下方添加另一个 div 并使用“clear:both”。当然，您也可以设置包含 div 的高度和宽度。

【讨论】：