1

也许这是一个愚蠢的问题，但我对 CSS clear正确使用有疑问。

我有这个模板： http: //onofri.org/example/WebTemplate/

为什么如果我删除（您可以尝试使用萤火虫）清除属性：从#footcontainer div 中我都知道该 div 位于顶部（它似乎几乎在标题下方和两列下方）

我的想法是这件事发生是因为 #content 和 #sidebar 这两列浮动到左侧并且没有设置clear：都在#footcontainer div 上，浏览器尝试将此 div 也放在#content * div 的右侧，但有没有空间并放在顶部。

这是一个正确的直觉还是我错过了什么？

肿瘤坏死因子

安德烈亚

4

4 回答 4

1

发生这种情况是因为每次浮动元素时，其容器都会失去其自动高度。如果你想防止这种情况发生，你可以做一些事情：

为容器设置给定的高度

前任：

<div class="my-container" style="height: 100px">
  <div style="float: left;">
    Some very interesting text right here.
  </div>
  <div style="float: left;">
    Don't read this and you'll be doomed.
  </div>
</div>

请注意，如果您设置了给定的高度，则 div 不会随着内容变得高于容器而调整大小。

style="clear: both"在浮动元素之后添加一个 div

前任：

<div class="my-container">
    <div style="float: left;">
      Some very interesting text right here.
    </div>
    <div style="float: left;">
      Don't read this and you'll be doomed.
    </div>
    <div style="clear:both"></div>
  </div>

是的，它有效。但只有菜鸟才会这样做。它不优雅并且会污染你的代码。

设置overflow: hidden为父容器

<div class="my-container" style="overflow: hidden">
    <div style="float: left;">
      Some very interesting text right here.
    </div>
    <div style="float: left;">
      Don't read this and  you'll be doomed.
    </div>
  </div>

这个很棒，但是如果你有一个绝对定位的东西并且必须将它移到父 div 之外，那么你就有危险了。你会有一个不愉快的惊喜。

使用 ClearFix 黑客。

这就是我这样做的方式：易于实施并且像魅力一样工作。查看此链接：http ://www.positioniseverything.net/easyclearing.html ；

如果你介意没有有效的 CSS（比如我），你可以使用不同的样式表和条件注释来定位 IE 浏览器。

有关该主题的更多资源：

于 2013-07-10T13:39:40.110 回答
0

我看到你的代码

根据我的说法，您的代码太复杂了，但是您可以用任何方法解决您this css的问题

习惯了这个css 

#c{position:relative;}
        #c:after {
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        bottom: -42px;
        background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px;
        height: 43px;
        }
    #footerRight{display:none;}
于 2013-07-10T12:23:00.363 回答
0

您的容器上没有设置高度。如果您将容器的高度更改为其内容的高度，在本例中为 596 像素，那么当您移除页脚上的 clear both 属性时，它不会移动一丁点。

于 2013-07-10T12:24:08.177 回答
-1

我认为这是因为如果您浮动一个对象，则父对象不会相应地调整大小。

例如，如果您有：

<div class="1px-border">
    <div class="float">
            <h3>TEST</h3>
    </div>
</div>

边框将完全平坦，并且不会调整到标题的大小。您可以通过在容器 div 中设置 overflow: auto 来修复它。

也就是说，我可能大错特错。

于 2013-07-10T12:14:15.947 回答