最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用<div style="clear:both"></div>解决了，但自己不是特别明白，又在网上查了相关内容，是因为给li设置了浮动之后它就脱离当前正常的文档流，所以没办法撑开外层ul的高度。

以下面代码为例，其实有好几种解决方法，我用的这种并不是最简单的。

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8">
<title>给li设置float浮动属性之后，无法撑开外层ul的问题。</title>
<style type="text/css">
ul{
    border: 1px solid #000;
    width: 200px;
    height: auto;
    margin-top: 100px;
}
li{
    float: left;
    list-style: none;
    margin-left: 10px;
}
</style>
<body>
<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ul>
</body>
</html>

以上代码显示结果如图，ul的边框变成了一条线，没有被撑开，；

可是我期望的效果是这样的：。

如果ul里边的内容是固定的，给ul加上高度就可以解决问题，但是遇到的项目中li是动态生成的，个数不能确定，所以高度只能设置成auto，这时候其实只要给外层ul也加上浮动属性就可以解决问题，但有时候布局会受到影响，只能根据情况而定；另外给ul加上overflow:auto/hidden也可以解决问题，如果要兼容ie6，后面加上"zoom:1"或者"width:100%"即可。

最后再总结一下，总共有4种方法：

第1种方法：在html代码里边给最后一个li后面加空元素清除浮动，div可以换成p或者其他。具体如下图:

第2种方法：给ul设置固定的高度。具体如下图:

第3种方法：给ul设置overflow属性，也可以是overflow:hidden。具体如下图:

第4种方法：给ul加浮动属性，可以换成float:right，但是很有可能布局就会收到影响。具体如下图:

每个人用的方法应该都不一样，我觉得第三种方法最简单，以后就用这种。哈哈，这会下班回家~~

给li设置float浮动属性之后，无法撑开外层ul的问题。的更多相关文章

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  3. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  4. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  5. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  6. float浮动属性的基本常识

    CSS 浮动 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边 ...

  7. CSS属性之float浮动属性

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

  8. li设置float后ul无法包裹li问题解决

    解决办法:灰常简单,只需给ul添加样式 ul{ overflow: auto; } 即可

  9. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

随机推荐

  1. SQL Cookbook

    1.  利用LAG OVER抑制结果集中的重复值 原始结果如下: SQL> select deptno,ename from emp order by deptno; DEPTNO ENAME ...

  2. 如何删除回滚段状态为NEEDS RECOVERY的undo表空间

    环境:RHEL 6.4 + Oracle 11.2.0.4 背景:备份恢复的测试库在一次不完全恢复后,没有来及做有效的全备,又一次数据库故障导致数据库无法正常open. 只能离线部分数据文件打开数据库 ...

  3. AndroidManifest.xml配置文件

    AndroidManifest.xml启动文件 主activity: <activity android:name="com.example.android01.MainActivit ...

  4. MySql操作时间

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 7天 DAY) <= date(时间字段名) 近30天 DAY) &l ...

  5. mysql连接查询

    以前查询都是随便查到结果就行了,因为发现每次查询的数量都很少,当然现在也是.不过效率一直是程序员执着的追求,我就多了解下差距. 首先是多张表联合,一张模板种类category,一张模板表templat ...

  6. JAVA 设计模式 适配器模式

    用途 适配器模式 (Adapter) 将一个类的接口转换成客户希望的另外一个接口. Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适配器模式是一种结构型模式. 结构

  7. asp.Net获取脚本传过来的参数的方法汇总

    最基础的知识啦,不过,还是记下来吧. 接收用get 方法传输的数据的写法: string userName= Request.QueryString["name"]; 接收用pos ...

  8. 基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...

  9. HTML语义化：HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  10. Hichart 资料收集

    Hichart简单使用Highcharts选项配置详细说明文档(zz) http://www.helloweba.com/view-blog-156.html  by 澳米科技 Highcharts提 ...