您的位置：首页 > Web前端 > CSS

CSS系列2-定位3：清除浮动1

2015-05-20 11:04 190 查看
浮动在布局上给我们带来了很多的方便，那么它有没有不足之处呢？

假设我们现在要做一个CSDN博客的这个样式


我们写下如下代码

<pre name="code" class="html"><html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>test</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
font-size:14px;
}
ul li{
float: left;
height: 39px;
margin: 0 5px;
padding: 0 25px;
border:1px solid #eee;
border-radius:5px 5px 0px 0px;
background-color:#ccc;
color:#3B5998;
line-height:39px;
}
</style>
</head>
<body>
<ul>
<li>发表文章</li>
<li>文章管理</li>
<li>类别管理</li>
<li>评论管理</li>
<li>博客配置</li>
<li>博客栏目</li>
<li>草稿箱</li>
<li>回收站</li>
</ul>
</body>
</html>




得到了这样的效果


看上去我们基本实现了CSDN的这样一个效果，并且这个效果应该有这么一个结构，那就是我有一个ul包裹着这些li，像这样


现在我们设置一下ul的背景色background-color:#000让它显示出来。很可惜，没有达到我们预期的效果


可以看到，在设置了背景色之后，页面并没有显示出ul，同时我们在浏览器调试的时候发现ul的尺寸为944*0，也就是说我们的ul没有高度。

当我们的li不设置浮动的时候，ul是可以根据li自动调整自己的尺寸的，如图所示，取消浮动后黑色ul立即显示出来了


那么这是为什么呢？

浮动和绝对定位类似，不再属于文档的普通流中，因此事不会影响到块级框的布局的（对内联框会有影响）。因此文档普通流会表现出浮动元素不存在时的样子，也就是说包含框不会自动改变自己的高度而是默认为0，因为它认为它里面没有内容啊。这种现象也就是所说的“高度塌陷”现象。这个现象在我们实际不居中是不愿意看到的，因为这会对我们之后的元素布局造成影响，因此，清除浮动就变得很重要。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航