Html CSS clearfix如何克服无法使用它将元素居中的问题
好吧，我正在为我的一个客户重新创建一个网站，多年来，我一直在做一些CSS方面有点过时的事情。我读了一些东西，发现了被称为clearfix的方法，自从我读到它以来，我一直想尝试一下 现在，我给它一个镜头，我发现我的中心元素的方法不工作 通常我会将其居中Html CSS clearfix如何克服无法使用它将元素居中的问题,html,css,clearfix,Html,Css,Clearfix,好吧，我正在为我的一个客户重新创建一个网站，多年来，我一直在做一些CSS方面有点过时的事情。我读了一些东西，发现了被称为clearfix的方法，自从我读到它以来，我一直想尝试一下 现在，我给它一个镜头，我发现我的中心元素的方法不工作 通常我会将其居中margin:0 auto但实现clearfix不再有效。因此，现在我正在寻找一种方法，应用相同的逻辑，但保持方程中的clearfix。我发现了一些可以在较新的浏览器上使用的东西，但不确定它们是否可以在较旧的浏览器上使用，我正试图尽可能地保持跨浏览器
margin:0 auto但实现clearfix不再有效。因此，现在我正在寻找一种方法，应用相同的逻辑，但保持方程中的clearfix。我发现了一些可以在较新的浏览器上使用的东西，但不确定它们是否可以在较旧的浏览器上使用，我正试图尽可能地保持跨浏览器兼容，而不必通过黑客来做其他事情。这是我重新创建站点的众多原因之一，我希望从一开始就为他们提供一个新的干净的代码库，这是兼容的
作为参考，这是我正在使用的clearfix方法
*编辑以显示代码*
<!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>
[此处标题]
*{边距：0；填充：0；}
正文{背景色：#3F3965；字体系列：Verdana，Geneva，无衬线；颜色：#000；}
#内容自动换行{边距：0自动；填充：0；宽度：800px；背景色：#FFF；}
#内容左{宽度：180px；浮点：左；}
#内容\右{宽度：620px；浮点：左；}
.四舍五入{
-moz边框半径：10px；/*Firefox*/
-webkit边界半径：10px；/*Safari，镀铬*/
边界半径：10px；/*CSS3*/
行为：url（border radius.htc）；
}
.border{border:solid 2px；}
.light{边框颜色：#999；}
.深色{边框颜色：#666；}
.clr{clear:both；}/*标准清除*/
/*启动clearfix*/
.clearfix:在{content:“.”之后显示：块；清除：两者；可见性：隐藏；行高度：0；高度：0；}
.clearfix{显示：内联块；}
html[xmlns].clearfix{display:block；}
*html.clearfix{height:1%；}
/*结束clearfix*/
左边
正确的
如前所述，主包含元素在应用clearfix类时会失去其“居中”位置。从我的理解来看，clearfix的整个要点是，将父元素中包含浮动元素的元素调整为其中最大浮动元素的高度。现在，我认为这应该是利润率：0自动；通过提供的类在同一个元素上，否则将被忽略解决具有浮动子元素的元素容器高度计算错误的一种方法是将overflow:hidden放在这些元素上。计算错误是因为在计算集装箱DIV高度时，内部布局尚未准备就绪。溢出：容器DIV上隐藏强制在渲染所有子对象后重新计算高度
<div class="container">
<div class="child">
Lorem ipsum
</div>
<div class="child">
Lorem ipsum
</div>
<div class="child">
Lorem ipsum
</div>
这只会在某些地方造成问题，在这些地方，某些元素绝对或相对地放置在容器外部，比如一些横幅和缎带。否则，这是一个干净的解决方案
PPK有一篇关于它的文章好的，我来回答我自己的问题。因为这里没有人能提供更好的，或者从某种意义上说是针对这个问题的
我最后做的是将另一个div放在content_wrap div中，并从此元素中删除clearfix类。这个新的div被赋予了clearfix类，并围绕着内容div的其余部分进行包装，以便按照预期的方式应用clearfix
这使得content\u wrap div可以按我希望的方式居中运行。扩展chris的答案，在这个场景中需要两个包装器
外部包装器应设置容器的宽度，并应用边距：0 auto样式：
.content_center {
width: 800px;
margin: 0 auto;
}
然后，我们可以将clearfix
类和样式应用于您的内容包装器，并将其宽度设置为100%
（其父级）：
您是否介意发布一些代码和/或创建一个示例？
.content_center {
width: 800px;
margin: 0 auto;
}
.content_wrap {
width: 100%;
}