Question

我正在用960网格系统构建一个模型并遇到了.clearfix的问题。我不喜欢在我的代码中有额外的div来触发清除，并且在所有文档中.clearfix似乎作为解决方案呈现。 960gs也有自己的clearfix类，所以我的期望是它应该工作。但是当我应用标签时没有任何反应。空div中的清晰类可以工作。虽然我想要强制清除的元素上的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>

Answer 1

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

<div class="container_12 clearfix">
    <div class="grid_4"></div>
    <div class="grid_4"></div>
</div>

Answer 2

我回过头来想解释一下我发现的解决方案以及从中学到的东西。

所以Clear fix会在元素继续浮动后停止元素。这是一个因使用float而产生的有趣问题。然而，在这种情况下很容易将症状与原因混淆。

你看到的是元素，div，它们不应该“浮动”在一起，因为它们位于不同的容器中。假设这是因为你没有清除浮动。此外，该问题有许多解决方案，涉及向标记添加元素以“清除浮动”。这个元素通常有“clear：both”作为样式和句点或“＆amp; nbsp”;因为它的内容。这看起来像是解决了这个问题，但最终成了解决另一个问题的黑客。

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

“经典”明确修复解决方案通过添加一个没有浮动和体积的元素来对此进行处理，以便容纳所有内容的容器不会崩溃并保持某种形式的体积。然而，解决设置溢出属性的真正问题是一个黑客攻击。

有明确修复问题不能使用960网格系统

2 个答案: