CSS布局问题，浮点数，嵌套div

Question

好的，我已经在我正在处理的这个个人网站上收到了一些有用的信息。在我乱七八糟的嵌套div中，我为自己创造了一些问题。我把那个图像和它旁边的文本都放在另一个div中，然后将div放在中心，这很好。但是为了在它下面开始一个新段落，我必须将该段落放在div中，因为需要清除它上面的浮点数（或者它在div旁边的右边距中显示文本）。我确信有一种更简单的方法可以做我想做的事情。如果有人能够看一下我的代码，看看我的结构错误，那将是一个很大的帮助......非常感谢。

正如你所看到的那样，标题“最近的工作”正在按照它应该的方式居中，但它没有从它上面的那个方框中获得通常的边距。

这是链接：

http://danberinger.com/

Answer 1

将overflow:hidden;放入第110行的div#intro_container选择器

了解其工作原理在此处阅读：http://csswizardry.com/floats/

Answer 2

问题是intro_container没有占据其子女的全部高度。通过在浮动的2个div之后放置一个带有clear样式的元素，您将获得所需的效果：

<div id="intro_container">

  <div id="messagebox">
    ...
  </div>

  <div id="picture">
    ...
  </div>

  <div style="clear: both"></div>
</div>

这将为“Recent Work”提供正常的填充。

Answer 3

我认为CSS clearfix将完全按照您的描述进行操作，而无需使用额外的div元素来污染您的代码。 http://www.webtoolkit.info/css-clearfix.html只需将CSS样式和.clearfix类添加到从浮动子项中折叠的任何div。