li里的a标签浮动了，为什么li本身也浮动了？

Question

<ul>  
    <li><a href="#"></a></li>  
    <li><a href="#"></a></li>  
    <li><a href="#"></a></li>  
</ul>


ul {  
    list-style: none;  
}  

a {  
    display: block;  
    width: 130px;  
    height: 30px;  
    text-align: center;  
    color: #fff;  
    float: left;  
    background: #95CFEF;  
    border: solid 1px #36F;  
    margin: 30px 5px;  
}

琢磨了半天了，也试验了下非li的元素，谢谢

Answer 1

去除掉ul的样式

这样你就可以看出来，其实li并没有你说的那样浮动

Answer 2

简单地说，因为 a 浮动了，所以脱离文档流了，所以 li 就没内容了，所以叠起来了，不信你可以在每个 li 里加点内容看

Answer 3

要实现想要的效果 需要闭合浮动 li{overflow:hidden}
这是浮动的一个bug:非浮动元素包裹浮动元素 非浮动元素的height：auto失效 不能根据内容自动适应高度 相当于height：0px