1

好的，我正在为我的一个客户重新制作一个网站，多年来，就 CSS 而言，我一直在做一些过时的事情。我已经阅读了一些东西，发现了一种称为 clearfix 的方法，自从我读到它以来，我一直想试一试。

现在我试了一下，我发现我的元素居中方法不起作用

通常我会将它居中，margin:0 auto;但实施 clearfix 这不再有效。所以现在我正在寻找一种应用相同逻辑但在等式中保留 clearfix 的方法。我发现了一些可以在较新的浏览器上运行的东西，但不确定它们是否适用于较旧的浏览器，并且我正在努力使其尽可能地保持跨浏览器兼容，而不会为了做其他事情而做一些事情。这就是我重新制作网站的众多原因之一，我希望从头开始为他们提供一个漂亮的新代码库，这是合规的。

供参考，这是我使用的 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 的全部意义在于它采用其中具有浮动元素的父元素是让元素将自身调整到其中最大浮动元素的高度。现在，我相信它应该在哪里起作用，margin:0 auto; 通过提供的类在同一元素上，否则将被忽略

4

3 回答 3

2

解决具有浮动子元素的容器高度计算错误的一种方法是在它们上放置溢出：隐藏。计算错误是因为在计算容器 DIV 的高度时内部布局尚未准备好。overflow:hidden on container 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;
    }

这只会在您有一些绝对或相对定位的元素实际放置在容器外部的地方引起问题，例如一些横幅和丝带。否则，这是一个干净的解决方案。

PPK 有一篇关于它的文章http://www.quirksmode.org/css/clearing.html

于 2012-05-13T10:48:01.483 回答
0

好的，我会回答我自己的问题。看到这里没有人可以提供更好的或特定于该问题的任何东西。

我最终做的是将另一个 div 放在 content_wrap div 中，并从此元素中删除了 clearfix 类。这个新的 div 被赋予了 clearfix 类并包裹了其余的内容 div，因此它将按照预期的方式应用 clearfix。

这允许 content_wrap div 以我想要的方式居中。

于 2012-05-13T21:42:49.897 回答
0

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

外部包装器应设置容器的宽度，并应用您的margin: 0 auto;样式：

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

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

.content_wrap {
  width: 100%;
}

这是一个小提琴。

于 2014-02-14T11:47:30.673 回答