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屬性並使它們成為“ display：inline block”，可能會更好。

Answer 2

您可以添加一個額外的<div class="spacer"></div>作為最后一個孩子並使用

.spacer {
    clear:both;
}

在這里可以找到更多信息。 如何防止浮動元素的父項崩潰？