给li设置float浮动属性以后，没法撑开外层ul的问题。

时间 2019-11-17

标签设置 float 浮动属性以后没法撑开外层问题栏目 CSS 繁體版

原文原文链接

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

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

<!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的边框变成了一条线，没有被撑开，；spa

但是我指望的效果是这样的：。htm

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

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

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

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

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

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

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