定位层，包装不缠绕在其他包含层

我其实是一个有点新的CSS，但是我一个2周学习后，周围知道我的路。然而，目前我有一个层（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> 
    </div> 
</body>

这里的问题是，如果你“看在边境”（我已删除;背景颜色和边框属性来提高代码的可读性），你会发现，第一主DIV没有按” t围绕第一和第二。如果我想修复它，我只需要添加一些内容到主图层。导致下面的代码：

<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

（注：均为直接联系;））

来源

2012-03-16 Snowflake

添加溢出：隐藏你的div容器。这将迫使div将你的内部divs“包装”起来。欢迎来到堆栈溢出！

来源

2012-03-16 14:39:55 huzzah

此外，divs是默认的块元素，所以不需要将宽度：100％添加到内部div，因为它们已经伸展以适合其父div（960px）。 – huzzah 2012-03-16 14:42:12

我有个问题，你能解释为什么会发生这种情况吗？感谢您的热烈欢迎，我真的很感谢您的回应！ – Snowflake 2012-03-16 15:20:14

嘿，好问题。你可以在这里找到这个答案的解释：http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem但它有点难把你的头包裹起来。顺便说一下，如果你喜欢我的回答并发现它有用，也许你可以考虑将它标记为可接受的答案，这样我就可以得到一点SO代表汁。快乐的编码！ – huzzah 2012-03-16 15:33:41

雪花
添加一个清晰的div，将其作为包装中的最后一个div。此外，如果您的包装具有固定宽度，那么请避免使用百分比来表示宽度，然后对内部div使用固定宽度。希望这有助于！

来源

2012-03-16 16:03:23

定位层，包装不缠绕在其他包含层

回答

相关问题