Question

我的div有问题。我目前在html中有四个“div”，如下所示。我想要做的是让我的页面中的所有内容都在“page”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>

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

4 个答案: