CSS clearfix怎么到这儿来不能用它来中心的元素(CSS clearfix how to o

好吧，我重新灌录一个网站，我的一个客户，多年来我一直尽可能CSS去做事有点老的时尚。香港专业教育学院读了一些东西，发现该方法被称为clearfix，我一直想给它一个镜头，因为我读到它。

现在，我给它一个镜头，我发现我的中心元素的方法是行不通的

通常我会居中margin:0 auto; 但实现这一clearfix不再有效。所以现在我期待的公式中应用相同的逻辑，但保持clearfix的一种手段。我发现一对夫妇的事情，将在新的浏览器工作，但不知道他们会工作在旧的，我想保持这是跨浏览器兼容尽可能没有黑客所知道的事情做其他事情。那的原因是多方面的，我重新灌录的网站（S）我希望有一个漂亮的新干净的代码为他们从地面基地一个，那就是标准。

以供参考，这是我使用clearfix的方法http://www.webtoolkit.info/css-clearfix.html

* 编辑，以显示代码 *

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[title here]</title>
<style type="text/css" media="all">
*{margin:0;padding:0;}
body{background-color:#3F3965;font-family:Verdana, Geneva, sans-serif;color:#000;}
#content_wrap{margin:0 auto;padding:0;width:800px;background-color:#FFF;}
#content_left{width:180px;float:left;}
#content_right{width:620px;float:left;}
.rounded{
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
  behavior: url(border-radius.htc);
}
.border{border:solid 2px;}
.light{border-color:#999;}
.dark{border-color:#666;}
.clr{clear:both;} /*standard clear*/
/*start clearfix*/
.clearfix:after {content: ".";display: block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix{height:1%;}
/*end clearfix*/
</style>
</head>
<body>

<div id="content_wrap" class="clearfix rounded border dark">
    <div id="content_left">left</div>
    <div id="content_right">right</div>
</div>
</body>
</html>

如前面提到的主要含有元素在施加clearfix类它失去它的“中心”位置。从我的理解它的clearfix整点采取那些浮动元素内它是有元素本身调整到其中最大的浮动元素的高度父元素。现在，这个地方就像我相信它应该保证金：0汽车; 通过另有规定的一类在相同的元素被忽略

Answer 1:

解决其流动儿童元素的容器高度的失算一种方法是把溢出：隐藏在他们身上。计算错误，因为在计算容器DIV的高度内部布局是未就绪的时间发生。溢出：隐藏在高度的容器DIV势力重新计算所有的孩子都渲染后。

<div class="container">
    <div class="child">
    Lorem ipsum
    </div>
    <div class="child">
    Lorem ipsum
    </div>
    <div class="child">
    Lorem ipsum
    </div>

.container{
    overflow:hidden;
    }
.child{
    float:left;
    width:20px;
    }

这只会在你有一些元素绝对或相对定位，实际上是放在外面的容器，像一些横幅和彩带palces造成问题。否则，这是一个干净的解决方案。

PPK上有一篇文章http://www.quirksmode.org/css/clearing.html

Answer 2:

好吧，生病回答我的问题。看到这里，因为没有人可以提供更好的东西或者在某种意义上具体的问题。

我最后做的是另一个DIV将其置于content_wrap DIV中，并从此元素移除clearfix类。这本新的div被赋予了类clearfix和周围的内容的div其余包裹因此它适用clearfix的方式意图。

这就形成了content_wrap DIV居中我想它的方式。

Answer 3:

扩大克里斯的答案，要在这种情况下两个包装器。

外面的包装应设置容器的宽度，并应用margin: 0 auto; 造型：

.content_center {
  width: 800px;
  margin: 0 auto;
}

然后，我们可以应用clearfix类和样式内容的包装，并设置它的宽度设置为100%其父）：

.content_wrap {
  width: 100%;
}

这里有一个小提琴。

文章来源: CSS clearfix how to over come the inability to center an element using it