CSS 页面布局中的 定位（Position）、 浮动 （Float）
第5章 页面布局中定位和浮动
一、定位（position）
1、为什么定位
定位，顾名思义设定一个元素移动到你想让他去的地方。
这种设定可以是多样的如：静态的，相对的，绝对或固定的定位方法的类型。
2、position属性的语法及属性值
（1） 语法： position: static / absolute / relative / fixed ;
（2）属性值：
- static ：默认值（即不定位）
- absolute : 绝对定位（脱离文档流）
- relative : 相对定位（不脱离文档流）
- fixed : 相对浏览器窗口定位（脱离文档流）
注意：当设置定位的时候一定要在定位类型后面加上移动位置的距离。
示例（1.2）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position 定位 </title>
<style type="text/css" media="screen">
body{
margin: auto;
/*外边距自适应，（去掉页面盒模型的默认值）*/
background-color: #CCC;/*页面背景为灰色*/
}
div{
width: 500px;
height: 300px;
background-color: #60C5F1;
/*为了明显一点我给这个div设置了宽高和背景色*/
position: absolute;/*绝对定位*/
left: 40px;/*距离左边位置40px，
这里的左边根据父元素决定（也就是div标签嵌套的位置）*/
top: 40px;/*距离上边位置40px，距离选择的方法同上*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在web中显示为：
3、元素的堆叠顺序—— z-index 属性
（1）在实际开发中，当元素过多显示时，就要用到这种堆叠属性，它指出元素的顺序，这样当元素定位到同一个点上或较大属性覆盖较小属性时，就会根据他的顺序来显示或执行。
（2）语法：z-index : number（数字类型的意思）;（值可以是负值，数值越小的越在下面显示）
示例（1.3） ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index 堆叠属性 </title>
<style type="text/css" media="screen">
body{
margin: auto;
/*外边距自适应，（去掉页面盒模型的默认值）*/
background-color: #CCC;/*页面背景为灰色*/
}
img{
width: 200px;
height: 200px;
z-index: -1;/*使图片的堆叠值小于文字*/
}
p{
position: absolute;/*绝对定位*/
top: 100px;
height: 100px;
/*给文本定位到图片上*/
}
</style>
</head>
<body>
<img src="D:/Pictures/1.jpg" alt="">
<p>图片在文字下面显示</p>
</body>
</html>
在web中显示为：
4、相对定位—— relative
（1）使用相对定位的元素，无论是否移动，都将占据原来的位置。
（2）相对定位的元素不会影响其它元素。
（3）计算偏移量top、left的参照物是元素移动前所在位置。
5、绝对定位—— absolute
（1）绝对定位的元素会脱离文档流，不再占据位置。
（2）元素被绝对定位后，后面的元素就会视它不存在，从而占据其位置。
（3）计算绝对定位元素的偏移量，有以下三种情况：
a 、当绝对定位元素没有被包含在元素中时，参照物是浏览器窗口。
b、当绝对定位元素包含在普通流的父容器时，参照物是浏览器窗口。
c、当绝对定位元素包含在被定位（相对定位/绝对定位）的父容器时，参照物是父容器。
6、页面布局实例
（1）示例（1.6）：常见的三栏布局
首先看一下每天都会看到的CSDN的首页，这个页面的布局就是用到了定位中最常见的三栏布局，外加 fixed的广告（用红线勾出来的）。
（2）三栏布局—— 绝对定位 absolute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏居中 </title>
<style type="text/css" media="screen">
/*三栏剧中的关键，父元素main*/
#main{
width: 920px;
height: 600px;
position: relative;/*相对定位*/
margin: 0px auto;/*居中显示*/
background-color: #CCC;/*页面背景为灰色*/
border: 5px solid red;/*让我能看到这个父容器*/
}
#left {
width: 200px;
height: 600px;
background-color: #01DFD7;/*左边为蓝色*/
position: absolute; /*绝对定位*/
top: 0px;
left: 0px;
}
#middle {
width: 500px;
height: 600px;
background-color: #00ff00;/*主体为绿色*/
position: absolute;/*绝对定位*/
top: 0px;
left: 210px; /*left的宽度+空白的距离*/
}
#right {
width: 200px;
height: 600px;
background-color: #FFFF00; /*右边为黄色*/
position: absolute;/*绝对定位*/
top: 0px;
left: 720px;
/*left的宽度+空白的距离+maiddle的宽度+空白距离*/
}
</style>
</head>
<body>
<div id="main">
<div id="left">左边</div>
<div id="middle">中间</div>
<div id="right">右边</div>
</div>
</body>
</html>
在web中显示为：
（3） 相对浏览器窗口定位—— fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏居中(position & fixed)</title>
<style type="text/css" media="screen">
/*三栏剧中的关键，父元素main*/
#main{
width: 920px;
height: 600px;
position: relative;/*相对定位*/
margin: 0px auto;/*居中显示*/
background-color: #CCC;/*页面背景为灰色*/
border: 5px solid red;/*让我能看到这个父容器*/
}
#left{
width: 200px;
height: 600px;
background-color: #01DFD7;/*左边为蓝色*/
position: absolute; /*绝对定位*/
top: 0px;
left: 0px;
}
#middle{
width: 500px;
height: 600px;
background-color: #00ff00;/*主体为绿色*/
position: absolute;/*绝对定位*/
top: 0px;
left: 210px; /*left的宽度+空白的距离*/
}
#right{
width: 200px;
height: 600px;
background-color: #FFFF00; /*右边为黄色*/
position: absolute;/*绝对定位*/
top: 0px;
left: 720px;
/*left的宽度+空白的距离+maiddle的宽度+空白距离*/
}
/*---------------------上面的都一样----------------*/
.fixed{
width: 100px;
height: 200px;
background-color: #FF7F27;/*广告为橘色*/
position: fixed;/*相对浏览器窗口定位*/
top: 100px;
right: 10px;
/*top、rigrht的参照物就是浏览器的窗口*/
}
</style>
</head>
<body>
<div id="main">
<div id="left">左边</div>
<div id="middle">中间</div>
<div id="right">右边</div>
</div>
<div class="fixed">广告</div>
</body>
</html>
在web中显示为：
二、浮动(folat)
1、浮动含义
（1）所有的元素都可以浮动。
（2）具有float属性的元素在父标签中是不占空间的。
（3）loat能解决标签之间有间隙的问题。
（4）浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
2、folat 属性语法及属性值
（1）语法：float: none / left / right ;
（2）属性值：
- none：对象不浮动；
- left： 左浮动；
- right： 右浮动；
示例（2.2）:
div{
folat: left;/*向左浮动*/
/*浮动不用设定浮动的距离，它会在碰到下个文档流的时候停下*/
}
3、浮动特性
（1）float 对行级（行内属性）标签的影响
float之后该行内元素的display属性会被赋予block值，可以设置width和height属性， 并支持margin和padding属性，行内元素去除了之间的莫名空白。
（2）float 对块级（块属性）标签的影响
在没有设置宽高的情况下浮动后，内容撑开宽度高度，可以使块级（块属性）元素并排排列。
4、清除浮动—— clear 属性
（1）默认情况下，浮动元素将堆叠在一起。clear属性清除堆叠。
（2）它指定浮动元素的一个或两个边缘必须不与另一个浮动元素的边缘邻接。
（3）如果前一个元素存在左浮动或右浮动，则换行以区隔 。只对块级元素有效。
（4）属性值：
- right：右侧不允许有浮动元素
- left：左侧不允许有浮动元素
- none：允许浮动元素出现在两侧
- both： 不允许有浮动
示例（2.4）：
<!-- 清除浮动的一种用法 -->
<style type="text/css" media="screen">
.clear{
clear: both;/*不允许浮动*/
/*当前面的元素添加了float，为了不影响下面元素的显示。
通常在这个浮动元素的后面加上<div class=“clear”></div>
来消除float对后面元素显示的影。*/
}
</style>
...
<div class=“clear”></div>
5、超出内容—— overflow 属性
（1）语法：overflow: visible / hidden / auto / scroll;
（2）属性值：
- visible：默认显示超出内容，不剪切内容也不添加滚动条
- hidden：超出内容隐藏
- auto：在需要时剪切内容并添加滚动条
- scroll：总是显示滚动条
（3）overflow 针对x轴和y轴设置时：
- overflow-x：visible / hidden / auto / scroll
- overflow-y：visible / hidden / auto / scroll
示例（2.5）：
div{
overflow: visible;/*默认值，超出内容显示*/
}
6、伟大的塌陷（清除浮动）
实例（2.6）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伟大的塌陷 </title>
<style type="text/css" media="screen">
/*父元素*/
#father {
background-color:#FFFF99;
border:1px solid #111111;
}
/*子元素*/
#box1 {
background-color:#00ff00;
border:1px solid #111111;
float:left;/*向左浮动*/
}
#box2 {
background-color:#ff0000;
border:1px solid #111111;
float:left;/*向左浮动*/
}
#box3 {
background-color:#0000ff;
border:1px solid #111111;
float:right; /*向右浮动*/
}
</style>
</head>
<body>
<div id ="father">
<div id="box1">box-1</div>
<div id="box2">box-2<br>......</div>
<div id="box3">box-3<br>......<br>......</div>
</div>
</body>
</html>
在web中显示为：
这个时候父容器father不见了，看不到高也看不到背景颜色，这就是塌陷。
下面来解决这个塌陷：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伟大的塌陷 </title>
<style type="text/css" media="screen">
/*父元素*/
#father {
background-color:#FFFF99;
border:1px solid #111111;
}
/*子元素*/
#box1 {
background-color:#00ff00;
border:1px solid #111111;
float:left;/*向左浮动*/
}
#box2 {
background-color:#ff0000;
border:1px solid #111111;
float:left;/*向左浮动*/
}
#box3 {
background-color:#0000ff;
border:1px solid #111111;
float:right; /*向右浮动*/
}
/*----------------清除浮动--------------------*/
.clear {
margin:0px;
padding:0px;
border:0px;
clear:both;
}
</style>
</head>
<body>
<div id ="father">
<div id="box1">box-1</div>
<div id="box2">box-2<br>......</div>
<div id="box3">box-3<br>......<br>......</div>
<div class="clear"></div><!-- 清除浮动的标签 -->
</div>
</body>
</html>
在web中显示为：
这样就解决了这个塌陷的问题。
7、浮动布局的实例
实例（2.7）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局 </title>
<style type="text/css" media="screen">
#top{
width: 920px;
height: 100px;
margin: 0px auto;
background-color: #FF7F27;/*导航栏背景为橘色*/
}
/*三栏剧中的关键，父元素main*/
#main{
width: 920px;
height: auto;
margin: 10px auto; /*上下距离为10px，左右自适应*/
background-color: #CCC;/*页面背景为灰色*/
}
#left {
width: 200px;
height: 400px;
background-color: #01DFD7;/*左边为蓝色*/
float:left;/*左浮动*/
}
#middle {
width: 500px;
height: 400px;
background-color: #00ff00;/*主体为绿色*/
float:left;/*左浮动*/
margin-left:10px;
margin-right:10px;
}
#right {
width: 200px;
height: 400px;
background-color: #FFFF00; /*右边为黄色*/
float:left;/*左浮动*/
}
#bottom{
width: 920px;
height: 100px;
margin: 0px auto;
background-color: #A349A4;/*底部背景为紫色*/
}
.clear{
clear: both;/*清除浮动*/
}
</style>
</head>
<body>
<div id="top">导航栏</div>
<div id="main">
<div id="left">左边</div>
<div id="middle">中间</div>
<div id="right">右边</div>
<div class="clear"></div>
</div>
<div id="bottom"> 底部</div>
</body>
</html>
在web中显示为：