在css文件中经常看到下面两种式样
display:block;
和
float:left;
感觉看了写资料和写了demo还是没能理解这两个式样具体的作用，一般什么时候需要用到这两个式样呢？请各位大大们不吝赐教
走同样的路，发现不同的人生
LZ的问题：
一切皆为框 p、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 ——《W3School：CSS 定位》
<a>
块框和行内框有明确的包含关系：
更多区别：
至于float，它主要是为了满足环绕的效果，请阅读：CSS float浮动的深入研究、详解及拓展(一)、（二）。
由于LZ缺的知识点太多，这里实在是写不完。还是建议完成w3school的相关课程学习，和codecademy的CSS Positioning类目下的课程。
如果LZ有英文阅读能力，在实践后可以以这篇文章来指导知识的深化：《【译】理解 CSS 规范》
下面主要是反驳“块级元素前后会带有换行符”的误导性观点。
CSS的问题，越基础，就越容易出现误解。
“块级元素前后会带有换行符”这种说法应该是来自于实战，用类比的方式做了相应知识点的内化。读到这句话，大家也可以很轻松地联想起word之类的文本排版软件的操作： Q: 如果我有文字段A和文字段B，我想让A和B左右不交叠，折开一行，我该怎么办？ A: 按回车。 Q: 如果我有文字段C和图片D，我想让D不出现在C中间，从C下延排起，我该怎么办？ A: 按回车。
是这样的吗？把word之类的文本排版软件的思维带到HTML里面来，下面的思维应该很常见： - 在两个元素之间死命摁回车，想让两个元素上下隔得远一些 - <br>标签放在任意两个元素之间，想让两个元素上下隔得远一些。http://jsfiddle.net/humphry/3Lk2Q/
<br>
我敢相信到现在都有人是用<br>（或者另外一个有高度的<p>标签）而非margin来做的垂直间隔。用Word的方式来理解HTML，用<br>来做间隔，等到试验出来用font-size和line-height去控制<br>的高度，以调节两个p之间的垂直距离的时候，就彻彻底底被带到沟里去了。（《你真的了解HTML吗》）
<p>
margin
font-size
line-height
“块级元素前后会带有换行符”的误导性大于它的帮助，LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗？”这样的问题。
换行符不是重点，重点是盒子。
要正确理解CSS排版中的这个基础部分，得先从文档流开始。
CSS为了达到日常排版的需求，给予了文档流以现实依据：我们的书写/阅读习惯：
（上面有个图，因为是GIF可能加载比较慢，注意看哟。）
文档流如同河流一般，将元素带向相应的屏幕位置。普通的，正常的，大众的文档流，就像是上面这个动画所示的，首要的铺排是：从左往右。次要的铺排是：从上到下。
为何我要强调普通的，正常的，大众的呢？因为有的语言是这样的：
这里就展现了从右向左，从上到到下的语言书写。因此跟这个世界的现象一致，文档流的顺序不总是从左往右从上到下，一系列属性可以改变它，不过我们这里不谈这个，我们只谈常规流。
CSS中的文档流中的两种元素，行内框的堆叠方向对应着我们的书写顺序，而块框则默认从上往下堆叠：
换行在这个顺序中重不重要？不重要，这个过程中，重点是框往哪个方向堆叠。
更加深入的常规流介绍：《w3help：常规流( Normal flow )》
前端是一个由实践发展起的方向，相关知识点的理解大家经常用的是类比，这很正常。盒子堆叠的机制用类比，说成是换行符，对不对呢？
对也不对。 说对，是因为，让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似； 说不对，是因为，如果理解到了盒子的层面，理解了块级元素和行内元素是如何按照文档流方向进行排版，理解了float元素是如何做到环绕，理解了浮动和清除浮动，就会明白，“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想，也很有误导性。
最好的理解CSS和HTML的办法，是用CSS和HTML的方式进行思考，而不是用其他的经验来套。这就像是英语口语，有英语思维，才能流利地表达。
更新：感谢P酱，这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关，标签无关的，“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说，破坏这两条规则很难达成想要的效果。
display: block;
此元素将显示为块级元素，此元素前后会带有换行符。
换行符
display: none;
此元素不会被显示。
display: inline;
默认。此元素会被显示为内联元素，元素前后没有换行符。
float: left
例子：segmentfault 的导航栏，撰写和消息可以使用float: left，当然之前可以定下整个的宽度。
撰写
消息
可以去了解下，页面的整体布局，块状元素；浮动也是css重要的概念，也要注意什么时候清除浮动。
补充一个知识点，float:left/right，会把元素强制转换为块级元素也就是display:block了。
楼主不明白这两个属性是做什么的，可能是基础只是没有理解，实战不够，建议先理解CSS中的盒模型
网页中的所有元素，也就是HTML中的p, h1, p, 等等元素，都可以理解成一个盒子；有些盒子的宽度默认是100%(block, 块)，有的盒子的宽度是根据其中内容的宽度自适应的(inline, 行内); 当然，display: none, 就把这个元素隐藏了;
p
h1
block
inline
display: none
display是个很重要的属性，这个属性有很多值，像block, inline, inline-block(兼), table, table-cell, table-row, none;
display
inline-block
table
table-cell
table-row
none
如果你理解了浏览器的渲染机制, float就很容易理解了, float, position: absolute|fixed等几个常用的属性，都会使元素脱离正常的文档流, 你可以将浏览器渲染想成一张纸, HTML元素根据自身的特性一个一个画到纸上，但是当遇到float等元素的时候, 就在纸的"上"面, 不在纸上画.....不明白再问吧.....
float
position: absolute|fixed
display 是设置显示方式，float是设置浮动、例如左右浮动。例如，导航就经常用到这两个，导航一般都用无需列表来做，设置float就可以把导航横放，再设置子菜单display:none,当hover的时候display就显示。
display:block，把元素的显示方式修改为块级元素，即元素独占一行，同时可以设定宽高； float:left ，是设置元素的浮动为左浮动
要了解display:block楼主可以先学习元素块和内联的区别http://www.w3cfuns.com/article-255-1-1.html float:left;的话去学习下http://www.w3cfuns.com/article-255-1-1.html
个人建议楼主学习下基础
display:block和display:inline对应，通俗点说，block不需要撑开，能直接设置margin或是width或height，而inline则不能做到，float:left一般用在横向导航条中，当然也可以用display:inline-block实现
LZ的问题：
块框和行内框有明确的包含关系：
更多区别：
至于float，它主要是为了满足环绕的效果，请阅读：CSS float浮动的深入研究、详解及拓展(一)、（二）。
由于LZ缺的知识点太多，这里实在是写不完。还是建议完成w3school的相关课程学习，和codecademy的CSS Positioning类目下的课程。
如果LZ有英文阅读能力，在实践后可以以这篇文章来指导知识的深化：《【译】理解 CSS 规范》
下面主要是反驳“块级元素前后会带有换行符”的误导性观点。
CSS的问题，越基础，就越容易出现误解。
“块级元素前后会带有换行符”这种说法应该是来自于实战，用类比的方式做了相应知识点的内化。读到这句话，大家也可以很轻松地联想起word之类的文本排版软件的操作：
Q: 如果我有文字段A和文字段B，我想让A和B左右不交叠，折开一行，我该怎么办？
A: 按回车。
Q: 如果我有文字段C和图片D，我想让D不出现在C中间，从C下延排起，我该怎么办？
A: 按回车。
是这样的吗？把word之类的文本排版软件的思维带到HTML里面来，下面的思维应该很常见：
- 在两个元素之间死命摁回车，想让两个元素上下隔得远一些
-
<br>标签放在任意两个元素之间，想让两个元素上下隔得远一些。http://jsfiddle.net/humphry/3Lk2Q/我敢相信到现在都有人是用
<br>（或者另外一个有高度的<p>标签）而非margin来做的垂直间隔。用Word的方式来理解HTML，用<br>来做间隔，等到试验出来用font-size和line-height去控制<br>的高度，以调节两个p之间的垂直距离的时候，就彻彻底底被带到沟里去了。（《你真的了解HTML吗》）“块级元素前后会带有换行符”的误导性大于它的帮助，LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗？”这样的问题。
换行符不是重点，重点是盒子。
要正确理解CSS排版中的这个基础部分，得先从文档流开始。
CSS为了达到日常排版的需求，给予了文档流以现实依据：我们的书写/阅读习惯：
（上面有个图，因为是GIF可能加载比较慢，注意看哟。）
文档流如同河流一般，将元素带向相应的屏幕位置。普通的，正常的，大众的文档流，就像是上面这个动画所示的，首要的铺排是：从左往右。次要的铺排是：从上到下。
为何我要强调普通的，正常的，大众的呢？因为有的语言是这样的：
这里就展现了从右向左，从上到到下的语言书写。因此跟这个世界的现象一致，文档流的顺序不总是从左往右从上到下，一系列属性可以改变它，不过我们这里不谈这个，我们只谈常规流。
CSS中的文档流中的两种元素，行内框的堆叠方向对应着我们的书写顺序，而块框则默认从上往下堆叠：
换行在这个顺序中重不重要？不重要，这个过程中，重点是框往哪个方向堆叠。
更加深入的常规流介绍：《w3help：常规流( Normal flow )》
前端是一个由实践发展起的方向，相关知识点的理解大家经常用的是类比，这很正常。盒子堆叠的机制用类比，说成是换行符，对不对呢？
对也不对。
说对，是因为，让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似；
说不对，是因为，如果理解到了盒子的层面，理解了块级元素和行内元素是如何按照文档流方向进行排版，理解了float元素是如何做到环绕，理解了浮动和清除浮动，就会明白，“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想，也很有误导性。
最好的理解CSS和HTML的办法，是用CSS和HTML的方式进行思考，而不是用其他的经验来套。这就像是英语口语，有英语思维，才能流利地表达。
更新：感谢P酱，这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关，标签无关的，“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说，破坏这两条规则很难达成想要的效果。
此元素将显示为块级元素，此元素前后会带有
换行符。此元素不会被显示。
默认。此元素会被显示为内联元素，元素前后没有换行符。
例子：segmentfault 的导航栏，
撰写和消息可以使用float: left，当然之前可以定下整个的宽度。可以去了解下，页面的整体布局，块状元素；浮动也是css重要的概念，也要注意什么时候清除浮动。
补充一个知识点，float:left/right，会把元素强制转换为块级元素也就是display:block了。
楼主不明白这两个属性是做什么的，可能是基础只是没有理解，实战不够，建议先理解CSS中的盒模型
网页中的所有元素，也就是HTML中的
p,h1,p, 等等元素，都可以理解成一个盒子；有些盒子的宽度默认是100%(block, 块)，有的盒子的宽度是根据其中内容的宽度自适应的(inline, 行内); 当然，display: none, 就把这个元素隐藏了;display是个很重要的属性，这个属性有很多值，像block,inline,inline-block(兼),table,table-cell,table-row,none;如果你理解了浏览器的渲染机制,
float就很容易理解了,float,position: absolute|fixed等几个常用的属性，都会使元素脱离正常的文档流, 你可以将浏览器渲染想成一张纸, HTML元素根据自身的特性一个一个画到纸上，但是当遇到float等元素的时候, 就在纸的"上"面, 不在纸上画.....不明白再问吧.....display 是设置显示方式，float是设置浮动、例如左右浮动。例如，导航就经常用到这两个，导航一般都用无需列表来做，设置float就可以把导航横放，再设置子菜单display:none,当hover的时候display就显示。
display:block，把元素的显示方式修改为块级元素，即元素独占一行，同时可以设定宽高；
float:left ，是设置元素的浮动为左浮动
要了解display:block楼主可以先学习元素块和内联的区别http://www.w3cfuns.com/article-255-1-1.html
float:left;的话去学习下http://www.w3cfuns.com/article-255-1-1.html
个人建议楼主学习下基础
display:block和display:inline对应，通俗点说，block不需要撑开，能直接设置margin或是width或height，而inline则不能做到，float:left一般用在横向导航条中，当然也可以用display:inline-block实现