CSS 清除了如何克服无法使用它居中的元素

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

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

通常我会将其居中margin:0 auto;但实施 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 类应用于它时会失去其"居中"位置。根据我的理解，清除修复的全部要点是获取包含浮动元素的父元素，让元素将自身调整到其中最大浮动元素的高度。现在，这就像我认为它应该边距：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>

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

这只会在默认情况下引起问题，其中某些元素绝对或相对位置实际上放置在容器外部，例如某些横幅和丝带。否则，这是一个干净的解决方案。

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

好的，我回答我自己的问题。看到这里没有人能提供更好的东西或具体意义上的问题。

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

这允许content_wrapdiv 按照我想要的方式居中。

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

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

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

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

.content_wrap {
  width: 100%;
}

这是一个小提琴。

相关内容

最新更新

热门标签：