Css 两个子div并排时对中包装div

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

我有一个包装器div，其中包含许多其他div。其中一些div并排使用

float:leftect。布局几乎完全符合我的要求。但是，由于某些原因，当包装不是
float:left时，包装divs边框没有一直延伸到footer元素

例如：

但是，当我将
float:left
添加到包装器div时，边框也会像我所希望的那样一直延伸：

然而，这样做的问题是包装器div不会自动居中。如何修复此问题？
您需要研究clearfixing，这是一组css规则，强制容器环绕其包含的任何浮动元素：

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

这是一个关于它们如何工作的详细答案