display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display：block可以显示一个块元素，或者display：inline是显示一个内联元素。
display主要用的CSS样式有以下三个：
display:block——显示为块级元素。
display:inline——显示为内联元素。
display:inline-block——显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
扩展资料：
显示的块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
显示的内联元素(inline)特性：和相邻的内联元素在同一行宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小
块级元素主要有：address,blockquote,center,dir,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,isindex,menu,noframes,noscript,ol,p,pre,table,ul,li等css属性。
内联元素主要有：a,abbr,acronym,b,bdo,big,br,cite,code,dfn,em,font,i,img,input,kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var等css属性。
四种清除浮动方法如下：1、使用空标签清除浮动。
我用了很久的一种方法，空标签可以是div标签，也可以是p标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义css代码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是w3c推荐的做法。至于使用
元素还是空
可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，
本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空
比较合适。
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9}
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
.clear{clear:both}
–>
left
right
2、使用overflow属性。
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义css属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容ie6，也可以用width:100%。
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9overflow:autozoom:1
}
/*
overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
–>
left
right
3、使用after伪对象清除浮动。
该方法只适用于非ie浏览器
。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9}
#layout:after{display:blockclear:bothcontent:”"visibility:hiddenheight:0}
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
–>
left
right
4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。
<!–
*{margin:0padding:0}
body{font:36px
bold
color:#f00
text-align:center}
#layout{background:#ff9float:left}
#left{float:leftwidth:20%height:200pxbackground:#dddline-height:200px}
#right{float:rightwidth:30%height:80pxbackground:#dddline-height:80px}
–>
left
right
