Css clear fix出现问题，无法使用960网格系统_Css_Css Float_960.gs_Clearfix

Css clear fix出现问题，无法使用960网格系统

css

Css clear fix出现问题，无法使用960网格系统,css,css-float,960.gs,clearfix,Css,Css Float,960.gs,Clearfix,我在用960网格系统构建模型时遇到了.clearfix的问题。我不喜欢在我的代码中有额外的div来触发clear和所有相关文档。clearfix似乎是解决方案。960gs还附带了自己的clearfix类，所以我希望它能够工作。但是，当我应用标记时，什么也没有发生。空div中的clear类有效。当元素上的clearfix类失败后，我想强制执行clear。考虑到clearfix的价值，这一定是我忽略了的资料来源如下： <html> <head> <title>&

我在用960网格系统构建模型时遇到了.clearfix的问题。我不喜欢在我的代码中有额外的div来触发clear和所有相关文档。clearfix似乎是解决方案。960gs还附带了自己的clearfix类，所以我希望它能够工作。但是，当我应用标记时，什么也没有发生。空div中的clear类有效。当元素上的clearfix类失败后，我想强制执行clear。考虑到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>


div>div
{
高度：3em；
背景色：石灰；
}

您必须将clearfix类应用于父容器才能工作

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

我回到这里，想解释一下我发现的解决方案以及我从中学到的东西

所以Clear fix将阻止它们所在的容器之后的元素继续浮动。这是使用float时出现的一个有趣的问题。但是，在这种情况下，很容易混淆症状和原因

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

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

“经典”的clear fix解决方案通过添加一个没有浮动和体积的元素来实现这一点，这样保存所有内容的容器就不会崩溃并保持某种形式的体积。然而，这是一个解决设置溢出属性的真正问题的技巧。

这似乎不起作用。在您的示例中，“fix”会应用于它包含的所有div吗？所以我过了很长时间才回到这个问题上。你的建议是解决问题的一半。另一半是将overflow属性添加到容器_12中，这样当它包含的所有内容都是float时，它就会被指定大小。