CSS定位div成内容

Question

在我的网站上做了很少的工作，目前，我在定位方面遇到了问题。我不知道为什么，但由于某些原因，我的divs似乎不在内容之内。这就是它的样子：

其定义的方式：

float: left;
font-family: 'Josefin Sans', sans-serif;
margin: 10px;
width: 100px; 
height: 100px;
background:#FFFFFFFF; 
text-align: center;
display: inline;
border: solid 2px #0047b3;
font-size: 28px; 

定义内容的方式：

#content { background-color:#6699ff; margin: 5px; border: 2px solid #0047b3; padding-left: 10px;}

我只是想将我创建的div添加到内容div中，但不知何故它不起作用。

Answer 1

这是因为'float：left'而发生的。浮动元素会使其“脱离文档的流程”。你可以通过删除float属性并使它们'显示：内联块'来获得更好的运气。

Answer 2

您可以添加额外的<div class="spacer"></div>作为最后一个孩子并使用

.spacer {
    clear:both;
}

可在此处找到更多信息 How do you keep parents of floated elements from collapsing?