将图层定位在图层内，包装器不会环绕其他包含的图层答案

【问题标题】：Positioning layers inside layers, wrapper doesn't wrap around the other contained layers将图层定位在图层内，包装器不会环绕其他包含的图层
【发布时间】：2012-03-16 14:35:50
【问题描述】：

尊敬的社区成员，

我实际上对 CSS 有点陌生，但是经过两周的学习，我知道了自己的方法。但是，目前我似乎无法修复图层（div-tags）的一个小问题。问题如下，我创建了以下来演示我的问题。

<body style="margin: 0;">
  <div style="margin: 0px auto; width: 960px;" id="main">
    <div style="clear: both; float: left; width: 100%; height: 100px;" id="one">
      Hello World
    </div>
    <div style="clear: both; float: left; width: 100%; height: 200px;" id="two">
      Hello next World!
    </div>
  </div>
</body>

这里的问题是，如果您“查看边框”（我已删除；背景颜色和边框属性以增加代码的可读性），您会注意到第一个主 div 没有环绕 div一和二。如果我想修复它，我只需要在主层添加一些内容。产生以下代码：

<body style="margin: 0;">
  <div style="margin: 0px auto; width: 960px;" id="main">
    <div style="clear: both; float: left; width: 100%; height: 100px;" id="one">
      Hello World
    </div>
    <div style="clear: both; float: left; width: 100%; height: 200px;" id="two">
      Hello next World!
    </div>
  LET ME SOLVE IT!
  </div>
</body>

现在的问题是，如何在不向主层添加“仅内容”的情况下获得最后一个结果？

非常感谢您阅读并回答我的问题！

图片请看：http://www4.picturepush.com/photo/a/7808622/img/7808622.png和http://www3.picturepush.com/photo/a/7808636/img/7808636.png

（注意：所有都是直接链接；））

【问题讨论】：

标签： css html wrapper layer

【解决方案1】：

将溢出：隐藏添加到您的容器 div。这将强制 div 围绕您的内部 div 进行“环绕”。欢迎使用 Stack Overflow！

【讨论】：

此外，默认情况下，div 是块元素，因此无需将 width:100% 添加到您的内部 div，因为它们会拉伸以适应其父 div (960px)。
我有一个问题，你能解释一下为什么会发生这种情况吗？感谢您的热烈欢迎，非常感谢您的回复！
嘿，好问题。您可以在此处的答案中找到解释：stackoverflow.com/questions/3400749/… 但您有点难以理解。顺便说一句，如果您喜欢我的答案并发现它很有用，也许您可以考虑将其标记为已接受的答案，这样我就可以获得一些 SO 代表果汁。编码愉快！

【解决方案2】：

雪花
添加一个清晰的 div 并将其作为包装器中的最后一个 div。此外，避免使用百分比作为宽度，如果您的包装器具有固定宽度，则为内部 div 使用固定宽度。希望这会有所帮助！

【讨论】：