CSS clearfix如何使用它无法使元素居中 [英] CSS clearfix how to over come the inability to center an element using it
问题描述
好吧，我为我的一个客户重新打造一个网站，多年来，我一直做一点老的时尚，就CSS。我读了一些东西，发现方法称为clearfix，我一直想要给它一个镜头，因为我读到它。
Ok I am remastering a site for one of my clients and for years I have been doing things a little old fashion as far as CSS goes. Ive read up on some things and found the method referred to as clearfix, and I have been wanting to give it a shot since I read about it.
现在我给了它一个镜头，我发现我的中心元素的方法不工作
Now that I am giving it a shot I am finding out my method of centering an element is not working
通常我会集中它 margin：0 auto; 但实现clearfix这不再工作。所以现在我正在寻找一种应用相同的逻辑，但保持clearfix在方程中的手段。我发现了一些东西，将工作在较新的浏览器，但不知道如果他们将工作在旧的，我试图保持这是作为跨浏览器兼容尽可能没有黑客的事情做事情做其他事情。这是我重塑网站的许多原因之一，我想要一个漂亮的新的干净的代码基地为他们从头开始，这是兼容。
typically I would center it margin:0 auto; but implementing the clearfix this no longer works. So now I am looking for a means of applying the same logic but keeping clearfix in the equation. I found a couple things that would work on newer browsers but not sure if they would work on older ones and I am trying to keep this as cross browser compliant as possible without hacking things to do things to do other things. Thats one of the many reasons I am remastering the site(s) I want a nice new clean code base for them from the ground up, that is compliant.
供参考这是clearfix的方法我使用
http://www.webtoolkit.info/ css-clearfix.html
for reference this is the method of clearfix I am using http://www.webtoolkit.info/css-clearfix.html
* 已编辑显示代码 *
*EDITED TO SHOW CODE*
<!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类时失去其从我的理解，获取父元素，其中有浮动元素的清除的整个点是让元素调整自身到其中最大的浮动元素的高度。现在在这里工作，我相信它应该的边距：0自动;
as previously mentioned the main containing element loses its "centered" position upon applying the clearfix class to it. The whole point of the clearfix from my understanding it to take parent elements that have floating elements within it is to have the element adjust itself to the height of the largest floating element within it. Now where this works like I believe it should the margin:0 auto; on the same element via a class provided otherwise gets ignored
推荐答案
解决具有浮动元素的元素的容器高度的错误计算的一种方法是把溢出：隐藏在他们上面。发生错误计算是因为在计算容器DIV的高度时内部布局尚未准备好。 overflow：在容器上隐藏DIV在渲染所有子代之后强制重新计算高度。
One method to solve the miscalculation of container height of elements having floating children is to put overflow:hidden on them. The miscalculation occurs because at the time of calculating the height of container DIV the inside layout is not ready. overflow:hidden on container DIV forces recalculation of the height after all children are rendered.
<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;
}
这将导致问题只有在你有一些元素绝对或相对定位实际上是放在容器外面，像一些横幅和丝带。否则这是一个干净的解决方案。
This will cause problem only in palces where you have some elements absolutely or relatively positioned that is actually placed outside container, like some banners and ribbons. Otherwise this is a clean solution.
PPK上有一篇文章 http://www.quirksmode.org/css/clearing.html
PPK has one article on it http://www.quirksmode.org/css/clearing.html
这篇关于CSS clearfix如何使用它无法使元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
