Question

遇到很奇怪的问题，关于css中li标签采用float的问题……

<div class="fy">
<ul>
<li ><a href="#">首页</a></li>
<li class="pre"><a href="#">上一页</a></li>
<li class="current"><a href="#">1</a></li>
<li class="next"><a href="#">下一页</a></li>
<li class="mo"><a href="#">末页</a></li>
</ul>
</div>

li标签采用了float后，居然跳出了块fy，可是li不用float就不能水平排列了……以前都不会的，就今天遇到的 郁闷，求解……

Answer 1

用了float，那是当然的吧，内容都脱离了文档流了……
在里面加个clear 的div就可以了……

.fy{border:1px solid #f00;}
li{float:left;}
.clear{width:1px;height:0;clear:both;}

<div class="fy">
<ul>
<li ><a href="#">首页</a></li>
<li class="pre"><a href="#">上一页</a></li>
<li class="current"><a href="#">1</a></li>
<li class="next"><a href="#">下一页</a></li>
<li class="mo"><a href="#">末页</a></li>
</ul>
<div class="clear"></div>
</div>

Answer 2

Vue实践-CSS样式position/display/float属性对比使用