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的显示区别：

<style>*{margin:5px;padding:5px;}#box1{border:1px solid #036;}#box2{border:1px solid #036; }#box3{border:1px solid #036;}#span1{border:1px solid #903;}</style><div　id="box1">box1box1box1box1</div><div　id="box2">box2box2box2box2</div><div　id="box3">box3box3box3box3</div>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属性；否则它的高度是自适应的，永远不会在它内部出现滚动条。下面是这段说明的示例：

<style>         *{margin:5px;padding:5px;}         #box1{                   border:1pxsolid #036;                   display:inline;                   width:500px;                   height:300px;         }         #box2{                   border:1pxsolid #036;                   width:500px;                   height:300px;         }         #box3{border:1pxsolid #036;}         #span1{border:1pxsolid #903;}</style><div　id="box1">box1box1box1box1</div><div　id="box2">box2box2box2box2</div><div　id="box3">box3box3box3box3</div>

4．display:inline-block

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

<style>         .menu{                   margin:0px;                   padding:0px;         }         .menuli{                   display:inline-block;                   width:100px;                   height:30px;                   line-height:30px;                   text-align:center;                   border-top:1pxsolid #09C;                   border-bottom:1pxsolid #09C;                   border-left:1pxsolid #09C;                   font-weight:bold;                   font-family:Verdana,Geneva, sans-serif;         }         .menuli:last-child{                   border-right:1pxsolid #09C;         }         .menuli:hover{                   background-color:#099;                   color:#FFF;               }</style><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的顺序：

<style>         *{margin:0px;padding:0px;}         div{word-break:break-all;border:1px solid #036;}         #box1{                   background-color:#0CF;         }         #box2{                   background-color:#F90;         }         #box3{                   background-color:#09F;         }</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，另一侧随窗口变动。为了显示浮动的特性，我们做右侧固定、左侧自适应的例子。文档结构如下：

<div id="rightSide"></div><div id="mainContent"></div>

添加CSS如下：

<style>         *{margin:0px;}         #rightSide{                   float:right;                   width:200px;                   height:30px;                   background-color:#09F;         }         #mainContent{                   margin-right:200px;                   height:30px;                   background-color:#CC6;         }</style>

效果图如下：

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

<div　id="leftSide"></div><div　id="rightSide"></div><div　id="mainContent"></div>

添加CSS如下：

<style>         *{margin:0px;}         #leftSide{                   float:left;                   width:200px;                   height:30px;                   background-color:#09F;         }         #rightSide{                   float:right;                   width:200px;                   height:30px;                   background-color:#09F;         }         #mainContent{                   margin-left:200px;                   margin-right:200px;                   height:30px;                   background-color:#CC6;         }</style>

效果如下：

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

<ul class="menu">    <li>menu1</li>    <li>menu2</li>    <li>menu3</li>    <li>menu4</li>    <li>menu5</li></ul>

添加CSS如下：

<style>         .menu{                   margin:0px;                   padding:0px;         }         .menuli{                   float:left;                   width:120px;                   height:30px;                   line-height:30px;                   list-style-type:none;                   text-align:center;                   border-top:1pxsolid #09C;                   border-bottom:1pxsolid #09C;                   border-left:1pxsolid #09C;                   font-weight:bold;                   font-family:Verdana,Geneva, sans-serif;         }         .menuli:last-child{                   border-right:1pxsolid #09C;         }         .menuli:hover{                   background-color:#099;                   color:#FFF;               }</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文件，节省服务器开销。