css - 当两个子 div 并排时居中包装 div

Question

我知道这个问题已经被问过很多次了，但我很难找出我的代码出了什么问题。

我有一个包装器 div，其中包含许多其他 div。其中一些 div 并排使用 float: left; 等。布局几乎完全符合我的要求。但是由于某些原因，当包装器不是 float: left;

时，包装器 div 边框不会一直延伸到页脚元素

例子: http://jsfiddle.net/8wVdm/

然而，当我将 float: left 添加到包装器 div 时，边框会一直延伸，就像我想要的那样: http://jsfiddle.net/C5kTh/

然而，问题是包装器 div 不会自动居中。我该如何解决这个问题？

Answer 1

您需要研究 clearfixing，这是一组 css 规则，强制容器环绕它包含的任何 float 元素:

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

here是关于它们如何工作的详细答案。

here's an updated fiddle with a clearfix added.