### 浮动
在DIV+CSS中浮动分为左浮动，右浮动，清除浮动
### 1、右浮动
所谓的右浮动，指一个块元素向右移动，让出自己的空间向右移动知道碰到包含自己的父元素的最右边的边框。如下图所示：
测试代码如下：
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 浮动案例 </title>
<link rel="stylesheet" style="text/css" href="float.css"/>
</head>
<body>
<div class="div1" id="id1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
</body>
</html>
~~~
~~~
.div1{
width:150px;
height:100px;
border:1px solid red;
background:pink;
margin-top:5px;
}
/*id 选择器*/
#id1{
float:right;
}
~~~
### 2、左浮动
只需要修改 CSS就可以了
~~~
.div1{
width:150px;
height:100px;
border:1px solid red;
background:pink;
margin-top:5px;
float:left;
}
/*id 选择器*/
#id1{
float:right;
}
~~~
左浮动，就是指某个块元素尽量往左边移动，这样就能让出它右边的空间，让别的块元素来填充！
注意：
1、左浮动必须所有块元素都保持一致，否则或出现错误！
2、如果浮动元素的高度不同，那么当它向下进行换行是就会回其他元素卡住。
### 定位
**常用的定位有四种：**
**1、 static （默认）**
**2、 relative 相对定位**
**所谓的性对定位是指，相对该元素应当显示的左上角重新定位，虽然它脱离的标准流，但它的空间，不能被占用！**
****
**
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 定位 </title>
<link rel="stylesheet" style="text/css" href="pation.css"/>
</head>
<body>
<div class="div1"> 为什么1</div>
<div class="div1"> 为什么2</div>
<div class="div1"> 为什么3</div>
<div class="div1"> 为什么4</div>
</body>
</html>
~~~
~~~
.div1{
width:100px;
height:50px;
border:2px solid red;
background-color:pink;
float:left;
}
/******相对定位***********
#pace{
position:relative;
left:20px;
top:100px;
}
****************/
~~~
**3、 Absolute 绝对定位**
**对该元素最近的那个脱离了标准六的元素定位**
**如果没有父元素，则相对body左上角定位**
**代码：**
**情景1：没有父元素**
~~~
<body>
<divclass="div1"> 为什么1</div>
<divclass="div1"> 为什么3</div>
<divclass="div1"> 为什么4</div>
<divclass="div2"></div>
<divclass="div1" id="pace"> 为什么2</div>
</body>
~~~
****
**情景2 有父元素，父元素未脱离标准流**
~~~
<body>
<divclass="div1"> 为什么1</div>
<divclass="div1"> 为什么3</div>
<div class="div1">为什么4</div>
<divclass="div2">
<divclass="div1" id="pace"> 为什么2</div>
</div>
</body>
~~~
**情景1,2 显示是一样的，都是上图：CSS也是一样的如下：**
~~~
#pace{
/绝对定位，究竟对谁？对预算最近的那个脱离了标准流的元素定位/
position:absolute;
left:20px;/*为正，向右移动*/
top:100px;/*为证，向下移动*/
}
~~~
~~~
.div2{
width:100px;
height:100px;
border:2px solid red;
background-color:pink;
float:left;
~~~
**情景3 有父元素，父元素脱离标准流**
****
**HTML代码和情景二一样，CSS变动如下：**
~~~
#pace{
/绝对定位，究竟对谁？对预算最近的那个脱离了标准流的元素定位/
position:absolute;
left:20px;/*为正，向右移动/
top:100px;/*为证，向下移动/
}
~~~
~~~
.div2{
position:relative;
left:20px;
top:100px;
width:100px;
height:100px;
border:2px solid red;
background-color:pink;
float:left;
}
~~~
**2、 Fixed 固定定位**
**不管怎样总是以试穿的左上角定位**
**HTML 使用情景二，CSS如下：**
~~~
#pace{
/ 绝对定位，究竟对谁？对预算最近的那个脱离了标准流的元素定位/
position:fixed;
left:20px;/*为正，向右移动*/
top:100px;/*为证，向下移动*/
}
~~~
~~~
.div2{
position:relative;
left:20px;
top:100px;
width:100px;
height:100px;
border:2px solid red;
background-color:pink;
float:left;
}
~~~
**显示效果和情景二一样！**
- 前言
- HTML（第一天）
- HTML（第二天）
- DIV+CSS(第一天）
- DIV+CSS(第二天）
- DIV+CSS(第三天）
- DIV+CSS(第四天）
- PHP开发环境配置说明
- PHP基础数据类型及运算符介绍
- 走进PHP函数
- 走进位运算
- 走进数组及相关数组函数
- 面向对象的编程（类与对象)
- 面向对象的编程(类成员方法用法）
- 构造方法，析构方法
- static，global用法
- 静态方法
- 面向对象的编程方法
- 接口方法
- 接口VS继承、final、const
- 错误及异常处理机制、错误日志
- HTTP协议深度剖析
- 文件下载
- PHP数据库编程
- 数据库编程（2）
- 超全局变量
- Zend studio 开发环境入门
- 雇员管理系统（1）
- 雇员管理系统（2）
- 会话技术(cookie session)
- 会话技术 session场景使用介绍！
- PHP.in中session和cookie的配置说明
- PHP文件编程
- 报表及绘图技术
- 报表及绘图技术（jpgraph库使用，Linux安装及配置说明）
- XML基本语法及DTD介绍
- XML编程（Dom技术）
- XML编程（Xpath技术,simpleXml技术）基础入门
- 网上支付平台PHP版本
- javascript基础入门