html 为什么ul不撑开,给li设置float浮动属性之后，无法撑开外层ul的问题。

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

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

ul{

border: 1px solid #000;

width: 200px;

height: auto;

margin-top: 100px;

}

li{

float: left;

list-style: none;

margin-left: 10px;

}

• 星期一
• 星期二
• 星期三
• 星期四
• 星期五
• 星期六
• 星期天

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

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

4种解决办法：

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

• 星期一
• 星期二
• 星期三
• 星期四
• 星期五
• 星期六
• 星期天

第2种方法：给ul设置固定的高度。

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

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

推荐阅读