文档流类型：文档中的元素在排列显示的显示规则，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>
-
-