存在明确修复不适用于 960 网格系统的问题

发布于 2024-12-17 04:12:32 字数 896 浏览 3 评论 0原文

我正在使用 960 Grid System 构建模型,并遇到了 .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>

I was building a mockup with 960 Grid System and ran into an issue with .clearfix. I'm not a fan of having extra divs in my code to trigger clear and in ALL the documentation around .clearfix seems to presented as the solution. 960gs also comes with its own clearfix class so my expectation is that it should work. However when I apply the tag nothing happens. The clear class in an empty div works. While the clearfix class on the element I want to force a clear after fails. Given how much is out there about clearfix it must be something I'm overlooking.

Here is the source:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你列表最软的妹 2024-12-24 04:12:33

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

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

You'll have to apply the clearfix class to the parent container for this to work.

<div class="container_12 clearfix">
    <div class="grid_4"></div>
    <div class="grid_4"></div>
</div>
泪之魂 2024-12-24 04:12:33

我回到这个话题,想解释一下我发现的解决方案以及我从中学到了什么。

因此,清除修复将阻止元素所在容器之后的元素继续浮动。这是使用浮动引起的一个有趣的问题。然而,在这种情况下很容易将症状与原因混淆。

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

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

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

I came back to this and want to explain what I found was the solution and what I learned from it.

So Clear fix will stop elements after the container that they are in from continuing to float. This is an interesting issue that arises from using float. However it is easy to confuse the symptom with the cause in this situation.

What you see are elements, divs, that are "floating" into one another when they should not because they are in separate containers. The assumption is that this is because you have not cleared the float. Furthermore there are many solutions to this problem that involve adding an element to the markup to "clear the float". This element usually has "clear:both" as a style and a period or " "; as it's content. This looks like it fixes the problem, but ends up being a hack to solve another issue.

The real problem is that a container that has only elements that float, ends up not having any volume. If you have two containers, one after the other, with floats it looks like the float is not being cleared because both containers collapse and the layout is broke. The solution is, however, to add an overflow property to the containers. In my case it was "overflow:auto".

The "classic" clear fix solution dose this by adding an element that does not have float and a volume so that the container that holds everything does not collapse and maintains some form of volume. However it's a hack to address the real issue of setting an overflow property.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文