css布局属性

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