我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。元素浮动之后，它脱离当前正常的文档流，所以无法撑开其父元素，造成父元素的高度塌陷。如下的代码就是li向左浮动后，ul高度坍陷，所以border就显示为一条线。代码、效果如下：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>li浮动引起ul高度坍陷的解决方法</title>
  6.      <style type="text/css">
  7.          *{
  8.              margin: 0;
  9.              padding:0;
  10.              font-size: 14px;
  11.              list-style: none;
  12.          }
  13.  
  14.          ul{
  15.              margin: 100px auto;
  16.              width: 505px;
  17.              border: 1px solid #FC8403;
  18.          }
  19.          li{
  20.              float: left;
  21.          }
  22.          a{
  23.              text-decoration: none;
  24.              display: block;
  25.              height: 30px;
  26.              line-height: 30px;
  27.              background-color: #ccc;
  28.              width: 100px;
  29.              margin-right: 1px;
  30.              text-align: center;
  31.  
  32.          }
  33.          a:hover{
  34.              background-color: #f60;
  35.              color: #fff;
  36.          }
  37.  
  38.          .clearfix {
  39.            *zoom: 1;
  40.          }
  41.          .clearfix:before, .clearfix:after {
  42.            display: table;
  43.            line-height: 0;
  44.            content: "";
  45.          }
  46.          .clearfix:after {
  47.            clear: both;
  48.          }
  49.      </style>
  50.  </head>
  51.  <body>
  52.      <ul>
  53.          <li>
  54.              <a href="##">首&nbsp&nbsp&nbsp&nbsp页</a>
  55.          </li>
  56.          <li>
  57.              <a href="##">新闻资讯</a>
  58.          </li>
  59.          <li>
  60.              <a href="##">产品展示</a>
  61.          </li>
  62.          <li>
  63.              <a href="##">售后服务</a>
  64.          </li>
  65.          <li>
  66.              <a href="##">联系我们</a>
  67.          </li>
  68.      </ul>
  69.  </body>
  70.  </html>

　　下面我们就来看一下float浮动因起此问题的几种解决方法：

　　  1、最直接简单的方法就是给ul加一个高度。

  1.          ul{
  2.              margin: 100px auto;
  3.              width: 505px;
  4.              border: 1px solid #FC8403;
  5.  
  6.              height: 30px; /*添加高度，解决float浮动引起的高度坍陷*/
  7.          }

　　  2、在最后一个li后加上一个div，给div加上clear:both的样式。

  1.          <li>
  2.              <a href="##">联系我们</a>
  3.          </li>
  4.          <div style="clear:both;"></div><!--添加一个空div，用clear:both清除浮动造成的影响--> 

　　  3、给ul加上overflow: hidden;zoom:1;的样式。

  1.          ul{
  2.              margin: 100px auto;
  3.              width: 505px;
  4.              border: 1px solid #FC8403;
  5.  
  6.              overflow: hidden;/*添加高度，解决float浮动引起的高度坍陷*/
  7.              zoom:;
  8.          }

　　  4、给ul加class="clearfix"的样式。

  1.          .clearfix {
  2.            *zoom:;
  3.          }
  4.          .clearfix:before, .clearfix:after {
  5.            display: table;
  6.            line-height:;
  7.            content: "";
  8.          }
  9.          .clearfix:after {
  10.            clear: both;
  11.          }

　   以上任意一种方法，都可以解决此问题。

li浮动引起ul高度坍陷的解决方法的更多相关文章

  1. li浮动时ul高度为0，解决ul自适应高度的几种方法

    网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...

  2. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  3. float过后 高度无法自适应的解决方法

    float过后 高度无法自适应的解决方法: 在float层最外面包一层div即可.

  4. CSS设置浮动导致背景颜色设置无效的解决方法

    float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...

  5. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  6. 新浪微博 page应用 自适应高度设定 终于找到解决方法

    我做的是PAGE应用,无法自适应高度.找了好久解决方法. 用js 设置父窗口 iframe 也不好用,有的浏览器不兼容. 官方上说发是这样的: 应用动态高度自适应 Iframe高度:开发者可以使Ifr ...

  7. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  8. html 关于内部是float元素的外部div高度为0的解决方法！

    最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...

  9. IE7下浮动元素的内容自动换行的BUG解决方法

    有时候我们想写个浮动得到这样的效果: 代码: <!doctype html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  2. php的一些小笔记-文件函数（3）

    文件的写入和读取 1 . 文件的读取 1, file_get_contents 函数是用来将文件的内容读入到一个字符串中的首选方法    结果

  3. open_basedir restriction in effect. File() is not within the allowed path(s)

    目前发现eaccelerator安装之后如果php.ini中设置open_basedir将导致open_basedir的一些报错(open_basedir restriction in effect. ...

  4. 启动两个tomcat

    因为项目的种种原因,必须启动两个tomcat测试 于是复制tomcat,改端口,报错,到日志看,发现shutdow端口也需要改 总结 server.xml改两个地方的端口 <Server por ...

  5. 安装python3.4

    1.http://www.python.org下载适合自己机型的镜像文件 2.一路“next”到底,安装python到C盘上 3.计算机-属性-高级系统设置-环境变量,将刚刚安装的python路径添加 ...

  6. hdu 3047 Zjnu Stadium

    http://acm.hdu.edu.cn/showproblem.php?pid=3047 带权并差集 #include <cstdio> #include <cstring> ...

  7. C# 知识点收集

    1. 数组复制 byte[] source; byte[] dest; int srcOffset = 0; int dstOffset = 0; int count = 10; System.Buf ...

  8. QQ聊天界面的布局和设计(IOS篇)-第二季

    QQChat Layout - 第二季 本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...

  9. RTP 协议

    转载http://www.cnblogs.com/qingquan/archive/2011/07/28/2120440.html 概述: 实时传送协议(Real-time Transport Pro ...

  10. Linux系统守护进程详解ntsysv 可以关掉那些服务

    acpid, haldaemon, messagebus, klogd,network, syslogd  以上几个服务必须开启!其他的分析如下: 1.NetworkManager,NetworkMa ...