0

我正在使用 960 Grid System 构建模型，但遇到了 .clearfix 的问题。我不喜欢在我的代码中使用额外的 div 来触发 clear，并且在 .clearfix 周围的所有文档中似乎都作为解决方案提出。960gs 还带有自己的 clearfix 类，所以我的期望是它应该可以工作。但是，当我应用标签时，什么也没有发生。空 div 中的 clear 类有效。虽然我想在失败后强制清除元素上的 clearfix 类。鉴于有关 clearfix 的信息有多少，它一定是我忽略的东西。

这是来源：

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<style type="text/css">
    div > div
    {
        height:3em;
        background-color:Lime;
    }
</style>
</head>
<body>
<div class="container_12">
    <div class="grid_4 clearfix"></div>
    <div class="grid_4"></div>
</div>
</body>
</html>
4

2 回答 2

0

您必须将 clearfix 类应用于父容器才能使其正常工作。

<div class="container_12 clearfix">
    <div class="grid_4"></div>
    <div class="grid_4"></div>
</div>
于 2011-11-19T19:30:55.797 回答
0

我回过头来想解释一下我找到的解决方案以及我从中学到了什么。

所以 Clear fix 将阻止元素在它们所在的容器之后继续浮动。这是使用浮点数引起的一个有趣的问题。然而，在这种情况下，很容易将症状与原因混淆。

你看到的是元素，div，它们在不应该的时候相互“浮动”，因为它们位于不同的容器中。假设这是因为您尚未清除浮动。此外，这个问题有很多解决方案，包括在标记中添加一个元素以“清除浮动”。该元素通常具有“clear:both”作为样式和句点或“ ”；因为它的内容。这看起来像是解决了问题，但最终成为解决另一个问题的黑客。

真正的问题是，只有浮动元素的容器最终没有任何体积。如果您有两个容器，一个接一个，带有浮动，看起来浮动没有被清除，因为两个容器都崩溃并且布局被破坏了。但是，解决方案是向容器添加溢出属性。就我而言，它是“溢出：自动”。

“经典”清除修复解决方案通过添加一个没有浮动的元素和一个体积来解决这个问题，这样容纳所有东西的容器就不会塌陷并保持某种形式的体积。然而，解决设置溢出属性的真正问题是一种技巧。

于 2013-07-01T14:50:19.403 回答