给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= ...
随机推荐
- 组合使用css选择器
今天看到有网站使用.classA.classB类似的选择器,不知道是否有人和我一样没有用过,所以了解一下,以下记录. 一.用法介绍 在css中.classA.classB指的是一个元素,同时满足cla ...
- 《Invert》开发日志01：核心玩法设计
前面提过,这个游戏的核心玩法基于我做的第一个Unity游戏,名字就叫<Invert>,现在在应用宝上面还能搜到.不过那个游戏也不是我原创的,它的玩法设计来自github上的一个开源项目(h ...
- 地铁 Dijkstra(优先队列优化) 湖南省第12届省赛
传送门:地铁 思路:拆点,最短路:拆点比较复杂,所以对边进行最短路,spfa会tle,所以改用Dijkstra(优先队列优化) 模板 /******************************** ...
- bzoj3223 文艺平衡树 (treap or splay分裂+合并)
3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 3313 Solved: 1883 [Submit][S ...
- zepto阻止事件冒泡
$("#model_frame").on("click",function(){ $(this).hide(); console.log($(this)); } ...
- bytes和bytearray
bytes bytes是Python 3中特有的,Python 2 里不区分bytes和str. Python 2中 >>> type(b'xxxxx') <type 'str ...
- win2008server R2 x64 部署.net core到IIS上出现【Failed to load the dll from [C:\Program Files\dotnet\host\fxr\1.0.1\hostfxr.dll], HRESULT: 0x80070057】错误
win2008server R2 x64 部署.net core到IIS上出现[Failed to load the dll from [C:\Program Files\dotnet\host\fx ...
- MySQL迁移[转]
http://dbarobin.com/2015/09/15/migration-of-mysql-on-different-scenes/ MySQL 迁移方案概览 MySQL 迁移无非是围绕着数据 ...
- jQuery获取文本节点之 text()/val()/html() 方法区别
1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p&g ...
- (原创)解决远程桌面连接远程应用时，出现 '应用程序错误: '0x7c931780'指令引用的 '0x89abcdef' 内存。该内存不能为 'read'"
公司的部分应用为cs结构,没有web版的,这些应用的外部访问基本都是通过使用windows server 2008 r2的远程桌面服务来实现的. 个人感觉微软远程桌面服务问题很多,今天有同事使用Rem ...