文档流类型：文档中的元素在排列显示的显示规则，html中提供了3中文档流类型控制元素的布局方式。
- 普通流：文档中的元素默认显示显示规则。
- 从上到下，从左到右
- 块级元素独占一行
- 元素不能重叠（无法交汇）
- 浮动流：设定元素向某一个方向倾斜浮动的方式排列元素。 定位
- 从上到下，按照指定方向见缝插针。
- 元素不能重叠（无法交汇）
- 定位：直接定位元素在文档或在父元素中的位置，表现为漂浮在指定元素上方。
- 脱离文档流。
- 元素可以重叠在一块区域内,按照显示的有限级别以覆盖的方式显示。
布局属性：用来控制元素显示位置文档布局方式的属性，按照功能可以分为如下三类。
- 控制显示类属性
display：设定元素的显示类型，常用取值如下。
none： 隐藏对象，不占据空间。
inline： 指定对象为内联元素。
block： 指定对象为块元素。
inline-block： 指定对象为内联块元素。
visibility ：设定是否显示元素，常用取值如下
visible： 设置对象可视，但占据空间
hidden： 设置对象隐藏
1 <style type="text/css"> 2 ????div{ 3 ????????border: 2px black solid; 4 ????????width: 300px; 5 ????????height: 400px; 6 ?????????7 ????} 8 ????#n{ 9 ????????display: none;10 ????}11 ????#h{12 ????????visibility: visible;13 ????}14 </style>15 </head>16 <body>17 ????<div id="n"></div>18 ????<div id="h"></div>19 </body>
- 控制浮动类属性
控制浮动类属性 float ：设定元素以浮动流方式显示。
none： 设置对象不浮动
left： 设置对象浮动方向向左
right：设置对象浮动方向右
clear：清除浮动。
none： 不清除浮动。
both： 清除两侧浮动。
left： 清楚左侧浮动。
right： 清除右侧浮动。
1 <style type="text/css"> 2 ????div{ 3 ????????border: 2px black solid; 4 ????????width: 300px; 5 ????????height: 400px; 6 ????????float: left; 7 ????} 8 ????#cl{ 9 ????????clear: left;10 ????}11 </style>12 </head>13 <body>14 ????<div></div>15 ????<div id="cl"></div>16 </body>
- 控制溢出类属性
控制溢出类属性 overflow(-x)(-y)：设定当内容溢出（横向\纵向）父容器时的显示方式。
visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容将以滚动条的方式呈现。
auto： 当内容溢出容器时出现滚动条，按需出现滚动条。
1 <style type="text/css"> 2 ????div{ 3 ????????border: 2px black solid; 4 ????????width: 300px; 5 ????????height: 400px; 6 ????????overflow: hidden; 7 ????} 8 </style> 9 </head>10 <body>11 ????<div id="over"></div>12 </body>
css布局属性
原文地址：http://www.cnblogs.com/-maji/p/7647238.html