html - CSS clear属性在具体案例中的使用的一些疑惑

Question

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

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

为什么如果我从 #footcontainer div 中删除(你可以尝试使用 firebug)属性 clear: both 我得到这个 div 被放置在顶部(它似乎几乎在标题下方和两列下方)

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

这是正确的直觉还是我遗漏了什么？

谢谢

安德里亚

Answer 1

发生这种情况是因为每次您 float 一个元素时，它的容器都会失去其自动高度。 如果您想防止这种情况发生，您可以采取一些措施:

给容器设置一个给定的高度

例如:

<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 将不会调整大小。

在 float 元素之后附加一个带有 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 网站:CSS Clearing http://www.quirksmode.org/css/clearing.html

• Chris Coyier 的 ClearFix 教程 http://css-tricks.com/snippets/css/clear-fix/