为什么包含div不能识别物品的高度？

Question

我的包含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>

Answer 1

这种情况正在发生，因为所有包含的div都会浮动。

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