CSS:子元素不包含在父元素内

因此，我的站点底部有一个容器，其中包含两列，如下所示：

<div id="homeBottomContent">
<div id="homeColumn1" class="contentColumn column1">
<h2>Column 1</h2>
<p>Column 1 Stuff</p>
</div>
<div id="homeColumn2" class="contentColumn column2">
<h2>Column 2</h2>
<p>Column 2 Stuff
</p></div>
</div>

.column1, .column2 {
width: 80%;
margin: 1em 10%;
}

.column1 {
float:left;
}

.column2 {
clear: left;
}

我的列未在框中居中。它们稍微向右倾斜。所以，当我拿走了边距并尝试：

.column1, .column2 {
width: 100%;
}

---

它们延伸到#homeBottomContent div之外并离开页面。是什么原因造成的，我能做些什么来修复它？我在#homeBottomContent div上没有侧边距或边距。

在

.column1

或

.column2

上没有任何边距。此处更新：出于某种原因，当我清除左侧的两列时，为它们设置边距：1em auto并将宽度设置为100%以下，这就像一个符咒。我仍然很好奇为什么浮子不起作用。@BrianRay是的，打得好。1米的填充物，这就是为什么100%从容器中取出的原因。Thanks clear属性指定不允许使用其他浮动元素的元素的哪一侧。