给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）
最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用<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）的更多相关文章
- 给li设置float浮动属性之后，无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。
cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...
- 【CSS学习】--- float浮动属性
一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...
- [转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...
- CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- float浮动属性的基本常识
CSS 浮动 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边 ...
- CSS属性之float浮动属性
float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float有四个属性 ...
- li设置float后ul无法包裹li问题解决
解决办法:灰常简单,只需给ul添加样式 ul{ overflow: auto; } 即可
- 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
随机推荐
- 以后上午就只能这样了么-jQuery
hi 昨天睡得不错 为什么早上还是看不进论文,宁愿做这个,也不愿认真看论文.感觉上还是下午看论文感觉要好的多.不过最近有三十多篇要看哇...管球... 1.jQuery -----jQuery常用插件 ...
- 应用程序Cache对象到高性能Memcached学习之路
来源:微信公众号CodeL 以下是个人学习之路的简单分享,不足之处欢迎大神们批评指正! 在网站开发的初期,我们没有考虑更多的东西,也没有对缓存进行系统的设计,而是直接使用了应用程序缓存对象Cache, ...
- Mobizen免帐号版
Mobizen电脑控制手机软件,是远程软件专家RSUPPORT公司研发的一款全新产品,可以通过电脑(web页面和客户端两种形式)远程控制安卓系统的智能手机和平板电脑,三种连接方式3G/4G.Wifi. ...
- HDU 5015 233 Matrix --矩阵快速幂
题意:给出矩阵的第0行(233,2333,23333,...)和第0列a1,a2,...an(n<=10,m<=10^9),给出式子: A[i][j] = A[i-1][j] + A[i] ...
- 洛谷10月月赛Round.1| P3399 丝绸之路 [DP]
题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚.西亚和欧洲,将那里的香 ...
- java 27 - 4 反射之 通过反射获取成员变量并使用
类Field: 提供有关类或接口的单个字段的信息,以及对它的动态访问权限. A:获得类的成员变量 数组: 1.getFields(公共类的) 2.getDeclaredFields(所有类型的) B: ...
- luogu[1279]字串距离
题目描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X ...
- APIO2015泛做
可以在UOJ上提交也可以在bzoj上提交(权限) A. Bali Sculptures 对于前72%的数据,按位考虑,然后跑一点沙茶dp就行了. dp:用f[x][y]表示前x位分为y段是否满足条件. ...
- sublime自定义快键键不行，
其实sublime自身就有格式化命令,就不再安装插件,位置在[Edit]->[Line]->[Reindent]但这个默认的命令没有快捷键,就重新定义了一下,想用习惯了的eclipse快捷 ...
- Windows 8.1 新增控件之 DatePicker
大年初一来介绍一个简单易用的DatePicker 控件,这个控件是新增的?印象里很早就有了啊,Anyway来看看Windows 8.1 里的DataPicker 有什么功能吧. 先来看看这个代码,很简 ...