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 之后放置一个设置了清晰样式的元素，您将获得所需的效果：

<div id="intro_container">

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

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

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

这将为“最近的工作”提供正常的填充。

Answer 3

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