header内div浮动背景消失的问题

为了保证易用性,我们一般会把首页切成三大块(header,main,footer),然后再给三大块里分各自的区域,又因为需要在大容器里水平对齐,所以我们会用到float,在用到float的时候,有时候会遇到之前给定背景颜色消失的问题,那就来看一下,这个到底是为什么。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>float问题探究1</title>
  <style type="text/css">
  body
  {
     background:green;
  }
  #header
  {
     width:1366px;
     height:768px;
     background:#ff6100;
  }
  #header #logo
  {
     width:200px;
     height:80px;
     background:black;
  }
  #header #banner
  {
     width:600px;
     height:80px;
     background:yellow;
  }
 #header #tool
  {
     width:200px;
     height:80px;
     background:blue;
  }

  </style>
 </head>
 <body>
 <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

        </div>

        <div id="tool">

     </div>
  </div>
 </body>
</html>

1.因为div默认是会自动换行的,所以我们看到的就会是在一个大容器里三个自上而下排列的div块,要让他水平排列,就要用到float,让它脱离文档流。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>float问题探究2</title>
  <style type="text/css">
  body
  {
     background:green;
  }
  #header
  {
     width:1366px;
     height:768px;
     background:#ff6100;
  }
  #header #logo
  {
     float:left;
     width:200px;
     height:80px;
     background:black;
  }
  #header #banner
  {
     width:600px;
     height:80px;
     background:yellow;
  }
 #header #tool
  {
     width:200px;
     height:80px;
     background:blue;
  }

  </style>
 </head>
 <body>
 <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

        </div>

        <div id="tool">

     </div>
  </div>
 </body>
</html>

2. 我们对黑色的logo,应用了float:left,让它脱离了文档流,脱离后,上部会留空,所以黄色的banner就会上浮,又因为logo本身就是在左边,所以float后位置不变,就造成了黄色的banner水平排在黑色的logo后面的效果。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>float问题探究3</title>
  <style type="text/css">
  body
  {
     background:green;
  }
  #header
  {
     width:1366px;
     height:768px;
     background:#ff6100;
  }
  #header #logo
  {
     float:left;
     width:200px;
     height:80px;
     background:black;
  }
  #header #banner
  {
     float:left;
     width:600px;
     height:80px;
     background:yellow;
  }
 #header #tool
  {
     width:200px;
     height:80px;
     background:blue;
  }

  </style>
 </head>
 <body>
 <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

        </div>

        <div id="tool">

     </div>
  </div>
 </body>
</html>

3. 本来是有logo,banner,tool的, 我们让logo和banner都脱离了文档流,这个时候,blue不见了, 是因为, 它会自动寻找最靠左边的空余处补上去,相当于排队看医生,1,2号已经进去了, 你自动补1的位置是一样的, 因为它脱离后没走, 还是在原来的位置看的病,所以blue就被第一个logo给盖住了。

这个时候, 我们让tool(blue)也脱离文档流靠左, 它就会自动上浮补空位, 因为空位本身就没有其它块在,所以这个时候blue的颜色正常显示。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>float问题探究4</title>
  <style type="text/css">
  body
  {
     background:green;
  }
  #header
  {
     width:1366px;
     height:768px;
     background:#ff6100;
  }
  #header #logo
  {
     float:left;
     width:200px;
     height:80px;
     background:black;
  }
  #header #banner
  {
     float:left;
     width:600px;
     height:80px;
     background:yellow;
  }
 #header #tool
  {
     float:left;
     width:200px;
     height:80px;
     background:blue;
  }

  </style>
 </head>
 <body>
 <div id="header">
            <div id="logo">

            </div>
            <div id="banner">

        </div>

        <div id="tool">

     </div>
  </div>
 </body>
</html>

再回到问题中来

我们发现,把header的高去掉,然后也让他脱离文档流,header就又变成了一个独立的块漂浮到了blue后面,这是为啥呢?

这个是因为, 首先我们去掉header的高后, 它的高就会随内部的div的高低变大变小, 就是会因为撑开变大因为缩小变小,
然后再使用float:left后, 它就会脱离文档流,脱离后, 就和原本的关系说再见了, 它就变成了独立的个体, 又因为正好右上部有空位,所以它就上浮补上去了。

来看一下这个实例

<html>
<head>
<title>CMS首页</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body
{
   margin:0px;
   padding:0px;
   font:13px Arial,宋体;
   background:red;
   text-align:center;
}
#container
{
  margin-left:auto;
  margin-right:auto;
  width:1366px;
  text-align:left;
}
#header
{
 width:100%;
 background:blue;
}
#header #logo
{
 float:left;
 width:200px;
 height:80px;
 margin-right:10px;
 background:#3d9140;
}
#header #banner
{
 float:left;
 width:900px;
 height:80px;
 background:#bc8f8f;
}
#header #tool
{
 float:right;
 width:250px;
 height:80px;
 background:#872657;
}
#main
{
 float:left;
 width:100%;
 height:600px;
 background:#9933fa;
}
#footer
{
 float:left;
 width:100%;
 height:80px;
 background:#00ff7f;
}
.nav
{
   float:left;
   width:100px;
   height:8px;
   clear:both;
   overflow:hidden;
}
</style>

</head>
<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="banner">
            </div>
            <div id="tool">
            </div>
        </div>
        <div class="nav"></div>
        <div id="main">
        </div>
        <div class="nav"></div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

因为header里的div height是80px; 所以当header height删除后,它也变成了80px; 又因为下面用到了clear:both清除浮动所以它下面也去不了, 再因为它没有用到float脱离文档流,所以它还是在原来的位置,再因为本身logo,banner,tool都脱离文档流了, 再加上它是默认从左边开始的,所以就跑到了左边的logo下层,高都一样,所以看不出来, 如果这个时候, 给header也加上float:left, 它就会脱离原来的区域,自动靠左, 又因为只有
左中和中右之间有空位,所以这个时候header div就会重新回来。

此条目发表在div/css分类目录,贴了, , , , , 标签。将固定链接加入收藏夹。

Leave a Reply

Your email address will not be published. Required fields are marked *