overflow解决float浮动后高度自适应的问题
http://www.flypeng.com win10系统 发布时间:2015-08-29 12:02 来源:鹏鹏电脑知识网 浏览:加载中

  也许你在做网页的时候发现,会发现一个区块内的元素在被应用了float之后,整个box的高度就不以被浮动对象的高度为标准了。如下图,城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度:

  怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可:

overflow:auto;zoom:1;



  “overflow:auto;”是让高度自适应,“zoom:1;”是为了兼容IE6,也可以用“height:1%;”来解决。

  完整的代码如下:

*{padding:0;margin:0;}

body{font-size:12px;line-height:150%;}

ul{list-style:none;}

.container{width:700px;margin:0 auto;}

.header,.footer{height:60px;background:#99CC66;margin-bottom:6px;font-size:18px;font-weight:bold;}

.main{}

.left{float:left;width:200px;}

.sidepanel{border:1px solid #CC6600;margin-bottom:8px;}

.sidepanel h2{font-size:12px;background:#CC6600;height:24px;line-height:24px;text-indent:20px;color:#fff;}

.city{padding:6px 0px;overflow:auto;zoom:1;}

.city li{float:left;width:35px;text-align:center;}

.right{margin-left:200px;background:#CCCC66;height:240px;}

.hotinfo{padding:6px;}

.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}

</style>

</head>

<body>

<p class="container">

  <p class="header">header</p>

  <p class="main">

    <p class="left">

      <p class="sidepanel">

        <h2>城市导航</h2>

        <ul class="city">

          <li>北京</li>

          <li>上海</li>

          <li>天津</li>

          <li>南京</li>

          <li>广州</li>

          <li>重庆</li>

          <li>济南</li>

          <li>杭州</li>

          <li>郑州</li>

          <li>北京</li>

          <li>上海</li>

          <li>天津</li>

          <li>南京</li>

          <li>广州</li>

          <li>重庆</li>

          <li>济南</li>

          <li>杭州</li>

          <li>郑州</li>

        </ul>

      </p>

      <p class="sidepanel">

        <h2>热门文章</h2>

        <ul class="hotinfo">

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留<font color="#43FF73">指纹</font></li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

        </ul>

      </p>

    </p>

    <p class="right">右侧内容</p>

  </p>

  <br class="clearfloat"><!-- 用于清除浮动的元素 -->

  <p class="footer">footer</p>

</p>

</body>

</html>

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!