装载：对CSS中的Position、Float属性的一些深入探讨 - oer - 博客园
对CSS中的Position、Float属性的一些深入探讨
对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性，对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨。
本文主要探讨点：
Position、Float属性的基本使用方法
Position、Float属性对元素所造成的影响
Position、Float属性交叉使用上面的影响
Position、Float属性使用上的小技巧
本文结构点：
& 盒子模型& HTML的普通流
& 属性值介绍& 用法介绍&&一些关于position的小知识
& 属性值介绍& 用法介绍& 与Position之间的兼容问题
HTML布局的基本要点：
如果要掌握、运用好Position、Float属性必须要对HTML的两个基本点有清晰的了解。
盒子模型（box model）
HTML的普通流（normal flow）
在HTML中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是属于块状（Block）类型的。
我们直观的上看两种盒子模型的区别
块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。
块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。
块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。
列举出一些大家常见的元素的分类
块状元素：P、DIV、UL、LI、DD、DT...
行内元素：A、IMG、SPAN、STRONG...
HTML的普通流
浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。（如下图）
&style type="text/css"&
div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; }
&strong&strong&/strong&&em&em&/em&&span&span&/span&
&div style="background: blue"&A&/div&
&div style="background: red"&B&/div&
&div style="background: green"&C&/div&
如果你不改变元素的默认样式前提下，元素在HTML的普通流中会&占用&一个位置，而&占用&位置的大小、位置则是由元素的盒子模型来决定。因此，在后续讲的Position、Float属性是否会使元素脱离这个普通流是一个关键点。
Position属性：
我们首先来谈谈Position属性，因为Position属性能够很好的体现HTML普通流这个特征。重点在于应用了不同的position值之后是否有脱离普通流和改变Display属性这两点。
Position属性值
Position的属性值共有四个static、relative、absolute、fixed。
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。
俗称的相对定位，重点在于对相对理解。我们此前说过每个元素在页面的普通流中会有&占用&一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。我们先用块状元素来做个示例：
&style type="text/css"&
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
&div style="background: blue"&A&/div&
&div style="background: position: top: 20 left: 20"&B&/div&
&div style="background: green"&C&/div&
右图中的黑色虚线部分为元素B的默认普通流位置，而黄色线则代表元素B的相对偏移量。我们可以很明显的看出在元素C依然还是保留在原位，并没有因为元素B发生了偏移而随之变化。
我们再来看看行内元素（在这里用大家最常用的span来做示例）
&style type="text/css"&
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
&strong&strong&/strong&&em&em&/em&&span&span&/span&
请注意看，在这里我是有对span进行width属性的赋值（为100px）。但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，换而言之，position: relative并没有改变行内元素的Display属性，这个概念非常重要（注意与接下来的absolute的区别）。
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定&根&，然后相对这个&根&元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！
我们先用一个默认嵌套的DIV来做示例
&body style="background:"&
&div style="background: #fff"&
&div style="background: #81b6ff"&
&div style="background: #b6ff00;"&
现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值
&body style="background:"&
&div style="background: #fff"&A
&div style="background: #81b6ff"&A - 1
&div style="background: #b6ff00; position: top: 0; left: 0;"&
A - 2&/div&&/div&&/div&&/body&
可以看到（A-2）最终是根据body来产生了位移，让我们对比分别设置一下父元素position。
从上面的图，我们可以总结以下几个结论。
1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。
2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的&默认位置&。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。特殊情况：
Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
IE7下的表现更类似于float，会附加到父元素的末尾。
一些的position小知识
1）应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素。
2）position: absolute忽略根元素的padding。
&div id="a" style="background: # width: 200"&A
&div id="b" style="background: #81b6 width: 150 position: padding-top: 100"&A - 1
&div id="c" style="background: #b6ff00; position: left: 0; top: 0"&A - 2
3）在IE6/7中设置position属性后会导致z-index属性失效
&!-- 解决方案，父元素设置一个更大的z-index值即可 --&
&div style="z-index: 2;"&
&div style="position: z-index: 1;"&
4）行内元素在应用了position：absolute之后会改变display。
&span style="position: width: 100 height: 100 top: 10 left: 10 background: #"&
我的display属性由inline变成了block
因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block。
5）应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。
在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：
会改变行内元素的呈现模式，使display之变更为block。
会让元素脱离普通流，不占据空间。
默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的&根元素&是可以被设置的，而fixed则其&根元素&固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
float的属性值有none、left、right，有几个要点：
只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。
与position的兼容性问题
1）元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。
&div style="position: float: left:50 top:10"&div&/div&
左图中的div是没有设置top、left值的，而右边则设置了50px的偏移。
2）元素同时应用了position: absolute及float属性，则float失效。
&div style="position: right:10 top: 10 float:"&
我是一个应用了position：absolute和float：left的DIV，不过我还是在浏览器的右边，没有浮动到左边。
3）第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）
&div style="position: left:10 top: 10"&
我是一个应用了position：absolute的DIV。
&div style="float: background: width: 300 height: 150 "&
我是float：left的DIV
4）同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。常用的清除浮动的方法有两种：
通过在容器中添加一个标签，设置该标签的样式为 clear: both
容器设置overflow: hidden
&div style="background: # width: 100%; overflow:"&
&div style="float: position:"&我是DIV&/div&
&div style="clear:"&&/div&后使用快捷导航没有帐号？
只需一步，快速开始
查看: 11937|回复: 16
一个div能不能即用float，同时又用position进行定位？
UID544488在线时间 小时积分575帖子离线17352 天注册时间
高级会员, 积分 575, 距离下一级还需 425 积分
今天在做一个页面的时候，突然注意到了这个。虽然，效果是做出来了，但是我不知道这样做是否符合标准。
一个div，不仅使用了float:right，而且还还使用了position:absolute进行定位。
大家怎么看？
补充内容 ( 08:52):
刚才楼下一位提醒我，position：absolute已经脱离文档流了，float是没用的，不好意思，忘了这么一档子事了，敢情都是position的left效果起了作用...
补充内容 ( 08:53):
不过要是用relative呢？ relative和float是一起起作用的，这么做符合标准么？ ··· ··· 既漂浮又相对定位，这么做常见么？
UID537416在线时间 小时积分1082帖子离线17352 天注册时间
银牌会员, 积分 1082, 距离下一级还需 1918 积分
position 可以用right 确定位置
UID544488在线时间 小时积分575帖子离线17352 天注册时间
高级会员, 积分 575, 距离下一级还需 425 积分
wsph123 发表于
position 可以用right 确定位置
二楼的，什么意思··· ···不太明白啊··· position：right ？？&&还有这个么？
UID567250在线时间 小时积分681帖子离线17352 天注册时间
高级会员, 积分 681, 距离下一级还需 319 积分
position:已经脱离文档流；float是没作用的。。。
UID544488在线时间 小时积分575帖子离线17352 天注册时间
高级会员, 积分 575, 距离下一级还需 425 积分
bluedreamer2011 发表于
position:已经脱离文档流；float是没作用的。。。
让你这么一说，我恍然大悟了··· ···看来float没起作用，完全是position后的left起了作用力··· ···把float去了也没问题了 ···
UID544488在线时间 小时积分575帖子离线17352 天注册时间
高级会员, 积分 575, 距离下一级还需 425 积分
bluedreamer2011 发表于
position:已经脱离文档流；float是没作用的。。。
那你说说要是用了&&position:relative 呢？&&我刚才试了一下 ， relative可以和float一起使用··· ··· 这个符合标准么？&&或者说这种用法常见么？
UID550840在线时间 小时积分1199帖子离线17352 天注册时间
银牌会员, 积分 1199, 距离下一级还需 1801 积分
直接绝对定位得了
UID537416在线时间 小时积分1082帖子离线17352 天注册时间
银牌会员, 积分 1082, 距离下一级还需 1918 积分
elarity 发表于
二楼的，什么意思··· ···不太明白啊··· position：right ？？&&还有这个么？
position: right:0;
UID569961在线时间 小时积分243帖子离线17352 天注册时间
中级会员, 积分 243, 距离下一级还需 257 积分
elarity 发表于
那你说说要是用了&&position:relative 呢？&&我刚才试了一下 ， relative可以和float一起使用··· ·· ...
这种用法比较常见吧 一般用于这个容器内有元素需要绝对定位的时候~
UID617196在线时间 小时积分238帖子离线17352 天注册时间
中级会员, 积分 238, 距离下一级还需 262 积分
可能就是多余了
UID553472在线时间 小时积分810帖子离线17352 天注册时间
高级会员, 积分 810, 距离下一级还需 190 积分
为 什 么 不 可 以
UID222398在线时间 小时积分26396帖子离线17352 天注册时间
float的好处是，块级元素的宽度也会自适应其内容了，所以我一直 float 和 position 合用，哇咔咔
UID433272在线时间 小时积分500帖子离线17352 天注册时间
高级会员, 积分 500, 距离下一级还需 500 积分
需不要一起写取决与你最终想实现什么效果
如果是控制位置，使用position:absolute后，此时元素的位置由left,top,bottom,right,margin控制，与是否浮动无关。
UID618864在线时间 小时积分76帖子离线17352 天注册时间
初级会员, 积分 76, 距离下一级还需 124 积分
呵呵 已经postion了 还怎么float!
UID616810在线时间 小时积分73帖子离线17352 天注册时间
初级会员, 积分 73, 距离下一级还需 127 积分
position和float都脱离了文档流：
position脱离后，不占据空间，用top和left决定位置；
float脱离后，占据空间，用margin决定和周围内容的举例位置等；
一般在需要用定位布局的时候，父元素作相对定位，子元素绝对定位；
UID600116在线时间 小时积分566帖子离线17352 天注册时间
高级会员, 积分 566, 距离下一级还需 434 积分
好像不行吧.FLOAT是居哪边，POSITION是绝对定位。想定哪都行。当然要控制好父元素。
UID616810在线时间 小时积分73帖子离线17352 天注册时间
初级会员, 积分 73, 距离下一级还需 127 积分
shghnn 发表于
好像不行吧.FLOAT是居哪边，POSITION是绝对定位。想定哪都行。当然要控制好父元素。
他的浮动不是定位置用的，是为了适应内容
Powered by您所在的位置： &
CSS布局浮动(float)和定位(position)属性的区别
CSS布局浮动(float)和定位(position)属性的区别
这里向大家描述一下CSS布局浮动(float)和定位(position)属性的区别和应用，postion:relative是子块级元素面向父级元素的相对定位，float:right/left是子块级元素流集合面向父级元素的定位。
你对布局浮动(float)和定位(position)属性的区别是否熟悉，这里向大家简单介绍一下，postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom，而float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。
CSS布局浮动(float)和定位(position)属性的区别和应用
postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。
float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。
二者之中最大的差别就是位置保留。
人们也就利用这种差异，可以做出CSS代码的滑动门菜单。
hover时取当前元素为保留位置，定义一个relative时，没有hover时使用float清空保留位置。
比较示例中的3个样式表，就可以发现：
&!--&*{border:1pxsolid#} &body{ &border-color:#09f; &} &ul{list-style:width:800height:600 &margin:0padding:10} &li{float:} &#li1{width:200height:200 &border-color:} &#li2{width:200height:150 &border-color:margin-left:-20} &#li3{width:200height:100 &border-color:margin-left:-20} &--&&!--&*{border:1pxsolid#} &body{ &border-color:#09f; &} &ul{list-style:width:800 &height:600margin:0} &li{position:} &#li1{width:200height:200 &border-color:top:10} &#li2{width:200height:150 &border-color:top:-192left:180} &#li3{width:200height:100 &border-color:top:-344left:360} &--&&*{border:1pxsolid#} &body{ &border-color:#09f; &} &#ul{list-style:width:800 &height:600margin:0padding:20} &#li1{width:200height:200 &border-color:position:} &#li2{width:200height:150 &border-color:float: &margin-left:-20margin-top:-202} &#li3{width:200height:100 &border-color:float: &margin-left:20margin-top:-202} &&ulid=#id&liid=li1li1&liid=li2li2&liid=li3li3&&&
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&&&的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
《待字闺中：编程面试题集》集合最新最全的面试经验和
这周Windows8.1正式版发布了，不知道各位有没有去更新
十一长假归来上班，好像更累了；早上也越来越堵了。小
全书分为基础篇、高级篇和应用篇3个部分，共18章，有重点、分层次地讲解SQL Server 2005的基础知识、高级使用技巧和项目应用方法
51CTO旗下网站jsp学习---css基础知识学习,float,position,padding,div,margin - Hi_Amos - 推酷
jsp学习---css基础知识学习,float,position,padding,div,margin - Hi_Amos
1.常用页面布局
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&css&/title&
&style type=&text/css&&
margin: 0px;
/* margin: 0 网页内容距离浏览器上下左右的距离都是0像素*/
/* margin: 5px 10 网页内容距离浏览器上下的距离为5,左右的距离都是10像素*/
/* margin: 0px 5px 10 网页内容距离浏览器上为0,下为10,左右的距离都是5像素*/
/* margin: 0px 1px 2px 3 网页内容距离浏览器上右下左(顺时针)分别为0,1,2,3像素*/
padding:10px;
/*页面边距为10像素*/
font-size: 12px;
/*最常用的字体大小为12像素,小一点为9像素,大一点为14像素*/
color:red;
/*设置页面字体颜色*/
background-color: #ffffee;
/*页面背景颜色*/
overflow: hidden;
/*去掉页面的滚动条*/
css常用布局&p&
css常用布局&p&
css常用布局&p&
css常用布局&p&
css常用布局&p&
css常用布局&p&
2.div照片布局
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&Insert title here&/title&
position: realtive;
background-image: url(&../img/beauty.jpg&);
width: 750px;
height: 1125px;
position: absolute;
left:<span style="background-color: #f5f5f5; color: #px;
top: 30px;
&div id=&img&&
&div id=&name&&足球宝贝!&/div&
这里name是
img的孩子,用的position是的绝对位置,但img是相对位置,所以这里将文字显示到了图片上面.
3.div float 和postion
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&position&/title&
&style type=&text/css&&
background-color: #ff33ee;
border:1px;
position: relative;
right: -30%;
&div id=&father&&
&div id=&son1&&aaa&/div&
&div id=&son2&&bbb&/div&
&div id=&son3&&ccc&/div&
注:布局分为相对布局和绝对布局,相对布局实质上还是会占用空间,占用原有一行.绝对布局则是直接替换掉其中一行.
float布局:
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&css学习&/title&
&style type=&text/css&&
background-color:#ff33ee;
border:1px;
float:left;
float:left;
float:left;
clear: both;
&div id=&father&&
&div id=&son1&&aaa&/div&
&div id=&son2&&bbb&/div&
&div id=&son3&&ccc&/div&
&div id=&clear&&&/div&
&div id=&son4&&ddd&/div&
div默认是行显示,float的作用是将原本在同一列的div显示到同一行.
这里定义clear是为了清除上面的浮动对后面son4的影响,让son4换行显示.
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致