CSS display & float详解

一、display属性

　　display属性的作用是规定元素以什么方式渲染。常用的值如下：

　　　　none：不被渲染

　　　　block：以块级元素渲染

　　　　inline：以内联元素渲染

　　　　inline-block：以行内块渲染

　　　　inherit：继承父级容器的渲染方式

1．元素渲染类型

　　浏览器对每个html元素有默认的渲染类型，默认为块级元素的主要有：div、form、h1-h6、hr、noframes、noscript、ol、p、pre、table、ul；默认为内联元素的主要有：b、i、u、br、input、select、label、span、em、strong、sub、sup、textarea。块和内联的主要区别，可以简单理解为渲染块的时候先换行，渲染完毕也换行；渲染内联元素不换行。下面例子说明了块级元素div和内联元素span的显示区别：

[javascript] view plain copy

1. <style>  
2. *{margin:5px;padding:5px;}  
3. #box1{border:1px solid #036;}  
4. #box2{border:1px solid #036; }  
5. #box3{border:1px solid #036;}  
6. #span1{border:1px solid #903;}  
7. </style>  
8. <div　id="box1">box1box1box1box1</div>  
9. <div　id="box2">box2box2box2box2</div>  
10. <div　id="box3">box3box3box3box3</div>  
11. inner1inner1inner1inner1inner1<span　id="span1">span1span1span1span1</span>inner2inner2inner2inner2inner2  

2．display:none与visibility:hidden;

　　从字面上看，display:none的意思是将渲染风格设置为无，visibility:hidden的意思是将可见性设为隐藏。似乎都是让一个元素不可见，区别却不能忽视。下图是将在box2中添加display:none的效果：

可以看出，box2已经被移除了文档流，浏览器渲染到box2的时候直接将其忽略，就好像它根本没有在页面中出现一样。再看visibility:hidden;的效果：

浏览器visibility:hidden;时，其实也渲染了这个元素，并且计算出它占用的问题，box2在文档流中是存在的，只不过浏览器为它留了白，相当于把不透明度设置为0。这两种隐藏元素的方式区别很明显了。而且对于内联元素，这种区别是一样的。如下图：

3．display:block与display:inline

　　显然如果设置的display类型与浏览器默认的一致，就没有什么必要了。比如在div的样式中添加display:block，这样完全没有必要。那么block元素和inline元素，除了换行不换行之外，还有什么区别呢？

　　答案是元素尺寸的计算。inline元素，根据其内容的尺寸计算宽度高度，只保证能容下内容，对inline元素设置width、height是无效的；block元素，尺寸依照width、height设定；如果没有认为设置尺寸，width上填充满父级元素，height上只保证能容下内容。换句话说，一个元素如果出现滚动条，那它便然是block的，而且它设置了height属性；否则它的高度是自适应的，永远不会在它内部出现滚动条。下面是这段说明的示例：

[javascript] view plain copy

1. <style>  
2.          *{margin:5px;padding:5px;}  
3.          #box1{  
4.                    border:1pxsolid #036;  
5.                    display:inline;  
6.                    width:500px;  
7.                    height:300px;  
8.          }  
9.          #box2{  
10.                    border:1pxsolid #036;  
11.                    width:500px;  
12.                    height:300px;  
13.          }  
14.          #box3{border:1pxsolid #036;}  
15.          #span1{border:1pxsolid #903;}  
16. </style>  
17. <div　id="box1">box1box1box1box1</div>  
18. <div　id="box2">box2box2box2box2</div>  
19. <div　id="box3">box3box3box3box3</div>  

4．display:inline-block

　　这种设置综合了inline和block的特点，既属于内联、又能设置width和height。值得一提的是，很多人说<img>是内联元素，其实是错误的，<img>是inline-block元素，而且img与其他元素的base-line是不同的，这里不再细展开。使用inline-block能做出很多东西，比如把li改成导航条：

[javascript] view plain copy

1. <style>  
2.          .menu{  
3.                    margin:0px;  
4.                    padding:0px;  
5.          }  
6.          .menuli{  
7.                    display:inline-block;  
8.                    width:100px;  
9.                    height:30px;  
10.                    line-height:30px;  
11.                    text-align:center;  
12.                    border-top:1pxsolid #09C;  
13.                    border-bottom:1pxsolid #09C;  
14.                    border-left:1pxsolid #09C;  
15.                    font-weight:bold;  
16.                    font-family:Verdana,Geneva, sans-serif;  
17.          }  
18.          .menuli:last-child{  
19.                    border-right:1pxsolid #09C;  
20.          }  
21.          .menuli:hover{  
22.                    background-color:#099;  
23.                    color:#FFF;        
24.          }  
25. </style>  
26. <ul class="menu"><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li><li>menu5</li></ul>  

二、float属性

1．关于浮动

　　浮动在css中比较奇葩，它的出现是为了把某些内联元素飘出来，然后让其他内联元素围在漂浮元素的周围，就类似于office中的图片环绕。浮动只能设置成left或right，而且浮动一般都是对可以设置尺寸的元素操作，比如<img>、block、inline-block。为了方便演示，我们把display中的例子略加修改，让div中的内容多一些，并对调box2和box3的顺序：

[css] view plain copy

1. <style>  
2.          *{margin:0px;padding:0px;}  
3.          div{word-break:break-all;border:1px solid #036;}  
4.          #box1{  
5.                    background-color:#0CF;  
6.          }  
7.          #box2{  
8.                    background-color:#F90;  
9.          }  
10.          #box3{  
11.                    background-color:#09F;  
12.          }  
13. </style>  

2．浮动的围绕

　　先看一个元素浮动后会出现什么效果，在box1中添加float:left。

、

可以看出，box1浮动后，脱离了文档流，box3取代了它的位置，图上的效果，看上去很像box1漂浮在box3上面，但其实不是，我们再把box1的width和height分别设置成200px和100px：

这回比较明显了，box1自己躺在左边，box3和box2围绕着它渲染；还嫌不明显？我们再把box3设置成float:left;width:200px;height:100px;，然后看下面效果：

浮动出来的元素，从左上角开始横向排列，排不下就换行。这些元素不在文档流中，他们后面的非浮动元素计算位置时，是接在他们前面非浮动元素后面的。

3．浮动高级应用

（1）两栏布局，要求左侧（右侧）固定宽度为200，另一侧随窗口变动。为了显示浮动的特性，我们做右侧固定、左侧自适应的例子。文档结构如下：

[html] view plain copy

1. <div id="rightSide"></div>  
2. <div id="mainContent"></div>  

添加CSS如下：

[css] view plain copy

1. <style>  
2.          *{margin:0px;}  
3.          #rightSide{  
4.                    float:right;  
5.                    width:200px;  
6.                    height:30px;  
7.                    background-color:#09F;  
8.          }  
9.          #mainContent{  
10.                    margin-right:200px;  
11.                    height:30px;  
12.                    background-color:#CC6;  
13.          }  
14. </style>  

效果图如下：

（2）三栏布局，要求左右两栏各200宽，中间栏自适应，文档结构如下：

[html] view plain copy

1. <div　id="leftSide"></div>  
2. <div　id="rightSide"></div>  
3. <div　id="mainContent"></div>  

添加CSS如下：

[css] view plain copy

1. <style>  
2.          *{margin:0px;}  
3.          #leftSide{  
4.                    float:left;  
5.                    width:200px;  
6.                    height:30px;  
7.                    background-color:#09F;  
8.          }  
9.          #rightSide{  
10.                    float:right;  
11.                    width:200px;  
12.                    height:30px;  
13.                    background-color:#09F;  
14.          }  
15.          #mainContent{  
16.                    margin-left:200px;  
17.                    margin-right:200px;  
18.                    height:30px;  
19.                    background-color:#CC6;  
20.          }  
21. </style>  

效果如下：

（3）导航布局，利用CSS将li做成横向导航（这里不使用display:inline-block的方法），文档结构如下：

[html] view plain copy

1. <ul class="menu">  
2.     <li>menu1</li>  
3.     <li>menu2</li>  
4.     <li>menu3</li>  
5.     <li>menu4</li>  
6.     <li>menu5</li>  
7. </ul>  

添加CSS如下：

[css] view plain copy

1. <style>  
2.          .menu{  
3.                    margin:0px;  
4.                    padding:0px;  
5.          }  
6.          .menuli{  
7.                    float:left;  
8.                    width:120px;  
9.                    height:30px;  
10.                    line-height:30px;  
11.                    list-style-type:none;  
12.                    text-align:center;  
13.                    border-top:1pxsolid #09C;  
14.                    border-bottom:1pxsolid #09C;  
15.                    border-left:1pxsolid #09C;  
16.                    font-weight:bold;  
17.                    font-family:Verdana,Geneva, sans-serif;  
18.          }  
19.          .menuli:last-child{  
20.                    border-right:1pxsolid #09C;  
21.          }  
22.          .menuli:hover{  
23.                    background-color:#099;  
24.                    color:#FFF;        
25.          }  
26. </style>  

显示效果如下：

4．浮动的争议

　　对浮动的应用，开发者中保持着两个流派：一方喜欢用浮动处理布局；一方反对用浮动处理布局。

　　我个人倾向于后者。毕竟浮动从诞生起，就是为环绕设计的，也只有环绕这个技能，通过其他方式不能实现。至于上面的两栏、三栏之类，都可以用其他方式实现。使用浮动处理布局，容易给人无解，尤其是其他开发人员。

　　国外很有名的互联网公司，比如twitter、facebook，布局也还在用table，这不是落后，而是让开发人员通过html结构，就能在脑海里反映出页面的轮廓，提高维护效率。而且，CSS主要还是做外观样式，布局方便的东西，交给html做更好一些，毕竟CSS有多页面通用这么一说。一个前端开发人员，如果想对页面进行重构，操作html总比操作html+css效率高。而且即便CSS出现问题没下载到浏览器，仅靠html信息布局，页面也不至于太乱，只是不太美观而已。

　　当然，使用float等特殊css属性布局也有html布局比不了的好处，比如上面的三栏布局，如果想交换左右两栏位置，只要在css中改变他们的float方向即可，十分方便。

　　总之，到底是html偏布局、CSS偏外观；还是html什么都不管，CSS既负责布局又负责外观，目前没有权威说法。两种方式也各有利弊，针对于具体项目而定。如果项目页面不多，完全可以把外观集成到CSS中，并通过不同CSS做出几套布局方案，给用户一种新鲜感；如果页面很多，用html布局更好一些，CSS只负责外观，各页面通用一个CSS文件，节省服务器开销。