使用 CSS 属性“float”在 HTML 中浮动 div 时遇到问题？

Question

我的 div 有问题。我目前在 html 中有四个 \xe2\x80\x9cdivs\xe2\x80\x9d ，如下所示。我想要做的是将页面中的所有内容放在 \xe2\x80\x9cpage\xe2\x80\x9d div 内。在 \xe2\x80\x9cmain\xe2\x80\x9d div 内，我有 \xe2\x80\x9ccontent\xe2\x80\x9d 和 \xe2\x80\x9cside\xe2\x80\x9d div 并且都有 \xe2 \x80\x9cfloat:来自 CSS 的 left\xe2\x80\x9d 属性。\xe2\x80\x99s 高兴的是，当我这样做时，我失去了 \xe2\x80\x9cpage\xe2\x80\x9d div 的白色背景。我怎样才能防止这种情况并创建我的内容和侧边 div？我知道这很容易，但由于某种原因我\xe2\x80\x99m 没有得到正确的结果。任何帮助将不胜感激。

\n\n

谢谢

\n\n

<div id=\xe2\x80\x9dpage\xe2\x80\x9d>\n   <div id=\xe2\x80\x9dcontainer\xe2\x80\x9d>\n   </div>\n   <div id=\xe2\x80\x9dmain\xe2\x80\x9d>\n      <div id=\xe2\x80\x9dcontent\xe2\x80\x9d>\n      </div>\n      <div id=\xe2\x80\x9dside\xe2\x80\x9d>\n      </div>\n   </div>\n</div>\n

\n\n

这是我的 CSS 代码

\n\n

#page \n{\nmargin: 2em auto;\nmax-width: 1000px;\nbackground-color:#fff;\n}\n\n#main\n{\nclear: both;\npadding: 1.625em 0 0;\nwidth:700px;\n}\n\n#content \n{\nclear: both;\npadding: 1.625em 0 0;\nwidth:740PX;;\nfloat:left;\n}\n\n#side\n{\nwidth:250px;\nmargin:5px;\nfloat:left;\n}\n

\n

Answer 1

丢失 div 背景的原因是它只包含浮动内容，这导致它没有高度。一旦有东西“清除”了漂浮物，它就会再次占据空间。尝试在maindiv 之后添加此内容（您可以在样式表中使用样式）：

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