Question

也许这是一个愚蠢的问题，但我对CSS 清晰的合理使用存有疑问。

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

为什么我删除（你可以尝试使用firebug） #footcontainer div中的 clear：both both 我获得了这个div放在顶部（它看起来几乎低于标题，在两列之下）

我的想法是这件事发生了，因为两列#content和#sidebar浮动到左边而没有在 #footcontainer div上设置清除：两者尝试将此div放在 #content * div的右侧，但没有空格并置于顶部。

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

TNX

安德烈

Answer 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 Hack。

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

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

有关该主题的更多资源：

Quirks Mode Site：CSS Clearing http://www.quirksmode.org/css/clearing.html
Chris Coyier的ClearFix教程 http://css-tricks.com/snippets/css/clear-fix/

Answer 2

我看到你的代码

你的代码根据我的太复杂但是你可以使用到this css而不是你的问题已解决 < / p>

用于此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;}

Answer 3

您的容器没有设置高度。如果您将容器的高度更改为其内容的高度（在这种情况下为596 px），那么当您在页脚上清除两个属性时它将不会移动一个iota。

Answer 4

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

例如，如果你有：

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

边框将完全平整，并且不会调整大小。您可以通过在容器div中使用overflow：auto来修复它。

那就是说，我可能是大错的。

有些疑问与在特定情况下使用CSS clear属性有关

4 个答案: