在清除修复时遇到问题，无法使用960网格系统

我正在用960网格系统构建样机，并遇到了.clearfix问题。我并不喜欢在我的代码中添加额外的div来触发清除，并且在所有文档中都有.clearfix似乎是解决方案。 960gs也带有自己的clearfix类，所以我的期望是它应该可以工作。但是，当我应用标签什么也没有发生。空格中的清除类工作。虽然元素上的clearfix类我想在失败后强制清除。鉴于有多少关于clearfix，它一定是我忽略的东西。在清除修复时遇到问题，无法使用960网格系统

这里是源：

<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>

来源

2011-11-19 QueueHammer

我回到了这里，想解释我发现的解决方案和我从中学到的东西。

因此，清除修补程序将停止它们处于继续浮动状态的容器后的元素。这是使用float浮现的一个有趣的问题。然而，在这种情况下很容易将症状与原因混淆。

你看到的是元素，divs，当它们不应该是“浮动”到另一个时，因为它们在不同的容器中。假设是，这是因为你没有清除浮动。此外还有很多解决这个问题的方法，包括在标记中添加一个元素来“清除浮动”。这个元素通常具有“清晰：两者”作为风格和时期或“& nbsp”;因为它的内容。这看起来像修复了问题，但最终成为解决另一个问题的手段。

真正的问题是，只有浮动元素的容器最终没有任何体积。如果您有两个容器，一个接一个，另一个容器有浮子，看起来浮子没有被清除，因为两个容器都倒塌，布局破裂。但是，解决方案是向容器添加溢出属性。在我的情况下，它是“溢出：汽车”。

“经典”清除修复解决方案通过添加一个没有浮点和体积的元素来达到这个目的，因此容纳所有元素的容器不会折叠并保持某种形式的体积。然而，解决设置溢出属性的真正问题是一个窍门。

来源

2013-07-01 14:50:19 QueueHammer

你必须在clearfix类适用于父容器这个工作。

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

来源

2011-11-19 19:30:55 Leo

这似乎没有工作。在你的例子中，将“修复”应用于它包含的所有div？ – QueueHammer

所以我在很长一段时间后回来了。你的建议是解决方案的一半。另一半是将溢出属性添加到container_12，以便当它包含的所有内容都是浮动时它将被赋予大小。 – QueueHammer

在清除修复时遇到问题，无法使用960网格系统

回答

相关问题