使用 CSS 属性“float”在 HTML 中浮动 div 有问题吗？

Question

我的 div 有问题。我目前在 html 中有四个“div”，如下所示。我想要做的是将页面中的所有内容都放在“页面” div 中。在“main” div 中，我有“content”和“side” div，它们都有来自 CSS 的“float:left”属性。令人高兴的是，当我这样做时，我失去了我的“页面”div 的背景，它是白色的。如何防止这种情况并创建我的内容和侧 div？我知道这很容易，但由于某种原因，我没有做对。任何帮助将不胜感激。

谢谢

<div id=”page”>
   <div id=”container”>
   </div>
   <div id=”main”>
      <div id=”content”>
      </div>
      <div id=”side”>
      </div>
   </div>
</div>

这是我的 CSS 代码

#page 
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}

#side
{
width:250px;
margin:5px;
float:left;
}

Answer 1

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

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

Answer 2

你需要包含你的花车。当你浮动一个元素时，它会将它从文档流中取出，所以如果你不告诉它包含子浮动，任何父容器都会崩溃。

要包含子浮动，最简单的方法是应用overflow: auto。

所以试试这个：

#page {
    margin: 2em auto;
    max-width: 1000px;
    background-color:#fff;
    overflow: auto;
}

Answer 3

我相信正在发生的事情是，当您为某个东西分配一个浮点数时，它的“高度”并没有真正代表它的父元素。由于其中的浮动元素，您的页面 div 现在认为它的高度为零。在“side” div 之后添加<br style="clear:both;height:1px" />。添加它会“清除”浮动的 div，因此它们的高度不会完全显示。

这可能不是你的情况，但是我自己也遇到过几次这个问题，这通常可以解决它。

Answer 4

    <html><head>
<style type="text/css">
#page 
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}

#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>

<body>
<div id="page">
   <div id="container">
   </div>
   <div id="main">
      <div id="content">
      </div>
      <div id="side">
      </div>
   </div>
</div>
</body>
</html>