最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用<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，但是很有可能布局就会收到影响。具体如下图:

第5种方法:用伪元素加在ul上

：after{
content:"";
display:block;
clear:both;
}

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

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<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. POJ 2540 Hotter Colder --半平面交

    题意: 一个(0,0)到(10,10)的矩形,目标点不定,从(0,0)开始走,如果走到新一点是"Hotter",那么意思是离目标点近了,如果是"Colder“,那么就是远 ...

  2. [Flex] flex手机项目如何限制横竖屏？只允许横屏？

    flex手机项目如何限制横竖屏?只允许横屏?   有人知道吗?求教.. 工程中 xxx-app.xml 找到</aspectRatio> 去掉注释 修改为<aspectRatio&g ...

  3. PageContext

    pageContext对象 pageContext对象是JSP中很重要的一个内置对象,不过在一般的JSP程序中,很少用到它,所以知道request对象.response对象的人比较多,知道pageCo ...

  4. jmeter jdbc request使用详解

    1.在使用 jdbc request之前需要加载一个jar包 在test plan中将jar包引入到classpath中 2.创建一个JDBC Connection Configuration Var ...

  5. qau-国庆七天乐——B

      B - Bull Math   Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Sub ...

  6. Android驱动入门-LED--测试APP编写③

    硬件平台: FriendlyARM Tiny4412 Cortex-A9 操作系统: UBUNTU 14.04 LTS 时间:2016-09-24  10:47:03 在Android Studio中 ...

  7. Stunnel服务端

    Stunnel on Debian GNU/Linux 6 (squeeze) 传统的POP3, SMTP, Samba等服务,都是不加密的协议(即在网络上明文传输数据),通过stunnel,可以将访 ...

  8. Eclipse C++开发环境配置(很简洁)

    from: https://www.zybuluo.com/ghostfn1/note/303921

  9. 转：eclipse的workspace和working set

    from: http://iyuanbo.iteye.com/blog/1158136   eclipse的workspace和working set 2015-05-20 09:28:48 标签:e ...

  10. ipone5 无法安装ipa软件

    iphone5s软件无法安装解决方法一,点击设置 - 通用 - 访问限制,先关闭“安装应用程序”选项,再打开,把后台应用程序刷新也关了,测试. iphone5s软件无法安装解决方法二,点击设置 - 通 ...