块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地方。

• 默认情况下块元素，是独占一行的
• 常见的块元素：div、p、h1-h6、form（只能用来容纳其他块元素）、hr、table、ul、ol等
• 高度，行高以及外边距和内边距都可控制
• 宽度缺省是它的容器的100%，除非设定一个宽度
• 它可以容纳内联元素和其他块元素

行内元素(inline element)也叫内嵌元素或内联元素，一般都是基于语义级(semantic)的基本元素。行内元素只能容纳文本或者其他行内元素，常见行内元素有a、span、img。CSS权威指南》中文字显示：任何不是块级元素的可见元素都是行内元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

• 和其他元素都在一行上
• 高，行高及外边距和内边距不可改变
• 宽度就是它的文字或图片的宽度，不可改变
• 行内元素只能容纳文本或者其他行内元素

块元素和行内元素的区别

• 块元素，总是在新行上开始；行内元素，和其他元素都在一行上
• 块元素，能容纳其他块元素或行内元素；而内联元素，只能容纳文本或者其他行内元素
• 块元素中高度，行高以及顶和底边距都可控制；内联元素中高，行高及顶和底边距不可改变
• 说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现

文档流

• 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流
• 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动
• 内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素
• 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中
• 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
• 基于文档流， 我们可以很容易理解以下的定位模式：相对定位（relative）， 即相对于元素在文档流中位置进行偏移，但保留原占位。绝对定位（absolute）， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。固定定位（fixed）， 即完全脱离文档流， 相对于视区进行偏移。

referrence：

CSS块级元素、内联元素概念 -- 简明现代魔法​www.nowamagic.net