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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>li浮动引起ul高度坍陷的解决方法</title>

     <style type="text/css">

         *{

             margin: 0;

             padding:0;

             font-size: 14px;

             list-style: none;

         }

         ul{

             margin: 100px auto;

             width: 505px;

             border: 1px solid #FC8403;

         }

         li{

             float: left;

         }

         a{

             text-decoration: none;

             display: block;

             height: 30px;

             line-height: 30px;

             background-color: #ccc;

             width: 100px;

             margin-right: 1px;

             text-align: center;

         }

         a:hover{

             background-color: #f60;

             color: #fff;

         }

         .clearfix {

           *zoom: 1;

         }

         .clearfix:before, .clearfix:after {

           display: table;

           line-height: 0;

           content: "";

         }

         .clearfix:after {

           clear: both;

         }

     </style>

 </head>

 <body>

     <ul>

         <li>

             <a href="##">首&nbsp&nbsp&nbsp&nbsp页</a>

         </li>

         <li>

             <a href="##">新闻资讯</a>

         </li>

         <li>

             <a href="##">产品展示</a>

         </li>

         <li>

             <a href="##">售后服务</a>

         </li>

         <li>

             <a href="##">联系我们</a>

         </li>

     </ul>

 </body>

 </html>

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

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

         ul{

             margin: 100px auto;

             width: 505px;

             border: 1px solid #FC8403;

             height: 30px; /*添加高度，解决float浮动引起的高度坍陷*/

         }

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

         <li>

             <a href="##">联系我们</a>

         </li>

         <div style="clear:both;"></div><!--添加一个空div，用clear:both清除浮动造成的影响--> 

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

         ul{

             margin: 100px auto;

             width: 505px;

             border: 1px solid #FC8403;

             overflow: hidden;/*添加高度，解决float浮动引起的高度坍陷*/

             zoom:;

         }

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

         .clearfix {

           *zoom:;

         }

         .clearfix:before, .clearfix:after {

           display: table;

           line-height:;

           content: "";

         }

         .clearfix:after {

           clear: both;

         }

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

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. php环境安装及搭建

    最近由于项目需要 转战 PHP .  在做了差不多两年java后 说实话看php代码还是有些难受的. 毕竟不习惯.废话不说 先说一下 PHP环境的部署等等,也就是最近几天学习的心得吧.方便以后参考. ...

  2. php 实时推送代码

    网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录. ...

  3. 【笔记】shell下的主要工具

    shell 下有很多工具是非常好的辅助. 一.自我精进的途径 1.help / --help :简要的帮助说明: help 是针对 shell 内建功能的帮助, gnu工具一般为 "程序名 ...

  4. linux运维基础__争取十月前研究的差不多

    转来的一编,考虑在十月前研究的差不多 linux运维人员基础 1.很多地方经常会用到的rsync工具 实施几台服务器的同步效果 我们公司就是使用这个工具完成服务器的游戏的服务端和客户端同步,有几个文章 ...

  5. scaletype

    http://www.myexception.cn/image/726203.html 图片说明Andorid中ImageView的不同属性ScaleType的区别 ImageView是Android ...

  6. logstash date插件介绍

    时间处理(Date) 之前章节已经提过, filters/date 插件可以用来转换你的日志记录中的时间字符串,变成 LogStash::Timestamp 对象,然后转存到 @timestamp 字 ...

  7. UML--核心元素之业务实体

    如果说参与者和用例描述了我们在这个问题领域中达到什么样的目标,那么业务实体就描述了我们使用什么来达到业务目标以及通过什么来记录这个业务目标. 如果把问题领域比喻成一幢大楼的话,业务实体就是构成这幢大楼 ...

  8. 《Algorithms 4th Edition》读书笔记——3.1 符号表(Elementary Symbol Tables)-Ⅲ

    3.1.3 用例举例 在学习它的实现之前我们还是应该先看看如何使用它.相应的我们这里考察两个用例:一个用来跟踪算法在小规模输入下的行为测试用例和一个来寻找更高效的实现的性能测试用例. 3.1.3.1 ...

  9. 直接使用ip访问google搜索

    173.194.127.148 173.194.127.51 173.194.36.48 (亲测,个人在用,有的ip有时候应该不能访问); 173.194.72.101 173.194.72.103 ...

  10. hdu 5033 Building (单调栈 或 暴力枚举 )

    Description Once upon a time Matt went to a small town. The town was so small and narrow that he can ...