51CTO旗下网站
浮动布局所带来的影响以及如何清除浮动
在页面的布局过程中浮动是个好东西，我们经常会用到浮动布局，它可以使元素共享一行，极大的方便了我们的布局过程。但是很多人可能只是会用，对浮动的原理只是一知半解，如果没有清晰的认识到浮动所带来的影响以及如何清除浮动所带来的影响，那么面对代码量庞大的页面将会变得一头雾水。
作者：娇娇爱前端来源：博客园| 09:40
在页面的布局过程中浮动是个好东西，我们经常会用到浮动布局，它可以使元素共享一行，极大的方便了我们的布局过程。但是很多人可能只是会用，对浮动的原理只是一知半解，如果没有清晰的认识到浮动所带来的影响以及如何清除浮动所带来的影响，那么面对代码量庞大的页面将会变得一头雾水。所以接下来我们来深入学习一下浮动布局，相信大家把浮动这个概念掌握的很清晰的时候，以后运用起来将会更加得心应手。
一. 什么是浮动布局?
Float(浮动)，会使元素向左或向右移动，使元素共享一行，类似于给元素加了inline-block的作用。在w3c中这样描述浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。接下来我们具体来看。
二. 浮动带来的影响
1. 脱离文档流，不占据页面空间
我们知道，css的块级元素比如说div在页面中默认是独占一行并且自上而下排列，也就是我们所说的流，也就是我们通常所说的标准流，接下来我们来看以下的案例：
html代码：
&class=&div1&150&*&100&&class=&div2&100&*&150&&class=&div3&300&*&200&&
.div1{&&width:&150&&height:&100&&background:&&&}&&.div2{&&width:&100&&height:&150&&background:&&&}&&.div3{&&width:&300&&height:&200&&background:&&&}&
效果如下图：
(一看这个颜色就知道楼主是个女孩纸，😋)
上图结果分析：
在标准流的理论中，div作为块级元素会独占一行，但是布局中一个最常见的问题就是如何能让多个div元素显示在同一行，这时，标准流已经不能满足我们的需求。此时我们就需要对元素进行浮动，此时我如果想让div1和div2显示在同一行，就需要对这两个元素添加浮动属性
float:left，此时我们来看一下结果：
上图结果分析：
如上图所示，可以看到，粉色的div和紫色的div覆盖在了蓝色div的上面。这是因为浮动元素脱离了标准流到了浮动层，浮动层比标准层要高并且不占据页面空间，所以我们看到div1和div2覆盖在了div3上面，虽然是覆盖但是div3里面的文字会被挤走，此时div3仍然在标准层所以仍然是占据页面空间的。
2. 浮动会将行内元素和行内块元素转化为块元素
上面讲的块元素可以进行浮动，其实对于行元素和行内块元素也可以进行浮动，并且一旦进行了浮动就将其转化为了块元素，我们这里以span标签来举例。
html代码：
&span&class=&span1&&span1&/span&&&span&class=&span2&&span2&/span&&&span&class=&span3&&span3&/span&&
.span1{&&&&&width:&200&&&&&height:&200&&&&&background:&&}&.span2{&&&&&width:&200&&&&&height:&200&&&&&background:&&}&.span3{&&&&&width:&200&&&&&height:&200&&&&&background:&&}&
结果如下：
众所周知，span是最常见的行内元素之一，行内元素共享同一行，中间有间隔，宽度和高度属性不起作用，此时，我们给每个span1加浮动属性float:left，我们看一下会有什么样的结果呢?结果如下图所示：
很显然，浮动过后的元素宽度和高度属性开始起作用，说明span元素从行标签变成了块标签。
三. 清除浮动
与其说是清除浮动，不如说是清除浮动带来的影响，我们一一来看清除浮动常见的四种方法：
假如说我们要实现如下布局，上方是导航部分，下方是内容部分，导航部分两个块左右浮动。
接下来我们来看原始代码，也就是未清除浮动时候的代码：
html代码：
&&class=&nav&&&&&&&class=&left&logo&&&&&&class=&right&右边区域&&&&class=&content&&
.nav{&&&&&width:&100%;&&&&&background:&#c0c0c0;&&&&&padding:&10px;&}&.left{&&&&&width:&300px;&&&&&height:&50px;&&&&&background:&&&&&&float:&left;&}&.right{&&&&&width:&300px;&&&&&height:&50px;&&&&&background:&#abcdef;&&&&&float:&right;&}&&&&&.content{&&&&&height:&400px;&&&&&background:&url(&img/10.jpg&);&&&&&background-size:&&}&
按照以上代码，结果将如下图：
结果分析：
我们知道，块级元素如果没有给高度，那么高度是由子元素还有padding值撑起来的，当left和right浮动之后脱离了文档流，不再占据页面空间，所以它们的父级的高度只有padding值，因而造成了上图的结果。那么如何消除浮动产生的影响呢?我们来看如下解决措施：
1. 给浮动元素的父级一个高度。
.nav{&&&&&width:&100%;&&&&&height:&50&&&&&background:&#c0c0c0;&&&&&padding:&10&}&
给浮动元素的父级一个高度，使之占据页面空间，这种写法的优点是简单容易理解，但是缺点也很突出，不适用于高度不固定的div。
2. 给浮动元素的父级加overflow:hidden
.nav{&&&&&width:&100%;&&&&&overflow:&&&&&&background:&#c0c0c0;&&&&&padding:&10&}　&
overflow:hidden 的意思是超出的部分要裁切隐藏掉，那么如果 float
的元素不占普通流位置，普通流的包含块要根据内容高度裁切隐藏。如果高度是默认值auto，那么不计算其内浮动元素高度就裁切，就有可能会裁掉float元素。所以如果没有明确设定容器高情况下，它要计算内容全部高度才能确定在什么位置hidden，浮动的高度就要被计算进去，顺带达成了清理浮动的目标。
3. 给浮动元素的兄弟元素加clear:both
html代码：
&div&class=&nav&&&&&&&&&div&class=&left&&logo&/div&&&&&&&&div&class=&right&&右边区域&/div&&&&&&&&div&class=&clear&&&/div&&&/div&&
.clear{&&&&&clear:&&}&&
在实际项目的布局中遇到的很多问题都是因为没有清除浮动而造成的，所以一定要养成写完一部分代码就清除浮动的习惯。
祝学习进步，工作顺利!
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条热点头条关注头条
24H热文一周话题本月最赞
讲师：119680人学习过
讲师：28666人学习过
讲师：190050人学习过
CTO专属活动
精选博文论坛热帖下载排行
本书全面阐述Java应用安全的基本知识并介绍一种强大的结构化安全设计方法；介绍独立于厂商的安全架构；列出详细的评估核对表以及23种经过实...
订阅51CTO邮刊css布局中，什么是BFC
时间： 20:56:47
&&&& 阅读：990
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&BFC的定义是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 &margin& 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。
在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。
BFC到底是什么？
当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。
怎样才能形成BFC
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
1.不和浮动元素重叠
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。比如下图的效果，参考例子
&div style="float: border: 2px solid red"& 123&/div&
&p style="border: 2display:overflow:*zoom:1"&
The quick brown fox jumped over the
dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
2.清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了(IE Haslayout)。
3.嵌套元素Margin边距折叠问题的解决
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。标签：&&&&&&&&&&&&&&&&&&原文地址：http://www.cnblogs.com/stephenykk/p/3807489.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！Access denied | www.bkjia.com used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (www.bkjia.com) has banned your access based on your browser's signature (44939adb25bb7942-ua98).使用php方法curl抓取AJAX异步内容思路分析及代码分享_php实例
原创
 17:16:29
88
其实抓ajax异步内容的页面和抓普通的页面区别不大。ajax只不过是做了一次异步的http请求，只要使用firebug类似的工具，找到请求的后端服务url和传值的参数，然后对该url传递参数进行抓取即可。
利用Firebug的网络工具
如果抓去的是页面，则内容中没有显示的数据，是一堆JS代码。
$cookie_file=tempnam('./temp','cookie');
$ch = curl_init();
$url1 = "http://www.cdut.edu.cn/default.html";
curl_setopt($ch,CURLOPT_URL,$url1);
curl_setopt($ch,CURLOPT_HTTP_VERSION,CURL_HTTP_VERSION_1_1);
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);
curl_setopt($ch, CURLOPT_ENCODING ,'gzip'); //加入gzip解析
//设置连接结束后保存cookie信息的文件
curl_setopt($ch,CURLOPT_COOKIEJAR,$cookie_file);
$content=curl_exec($ch);
curl_close($ch);
$ch3 = curl_init();
$url3 = "http://www.cdut.edu.cn/xww/dwr/call/plaincall/portalAjax.getNewsXml.dwr";
$curlPost = "callCount=1&page=/xww/type/.html&httpSessionId=12A9B726E6A2D4D3B09DEC&scriptSessionId=B8D3A3ADB8FAA658&c0-scriptName=portalAjax&c0-methodName=getNewsXml&c0-id=0&c0-param0=string:-param1=string:&c0-param2=string:news_&c0-param3=number:5969&c0-param4=number:1&c0-param5=null:null&c0-param6=null:null&batchId=0";
curl_setopt($ch3,CURLOPT_URL,$url3);
curl_setopt($ch3,CURLOPT_POST,1);
curl_setopt($ch3,CURLOPT_POSTFIELDS,$curlPost);
//设置连接结束后保存cookie信息的文件
curl_setopt($ch3,CURLOPT_COOKIEFILE,$cookie_file);
$content1=curl_exec($ch3);
curl_close($ch3);
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
全栈工程师
文章总浏览数posts - 155,&
comments - 21,&
trackbacks - 0
@参考文档：http://www.cnblogs.com/jenry/archive//818660.html
@什么叫脱离文档流？注意，只有绝对定位absolute和浮动float才会脱离文档流！
答案：CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
---部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
@相对定位和绝对定位的经典案例，还有百分比布局的经典案例， 在博客园文件空间中可以下载测试，在素材库bootstrap3常用布局实践案例中也可以找到。
@注意事项：
1，（！！！relative偏移导致标签元素重叠问题！！！）布局中注意的一个问题，就是一个div如果使用了相对定位relative，并且相对自己原位置发生了偏移，就会偏移到其他div的位置(不会把其他标签撑开，而是产生重叠)，例如一个div向下偏移了20px，那么下边的div就会和上边的div发生重叠。解决方法？对下边的div也设置相对定位relative属性，并发生20px的位移，就可以了。
2，（！！！元素标签占用文档流问题！！！）例如ul li标签，li设置了浮动，会不占用空间，ul不设置浮动，设置高度和宽度会占用空间（文档流），也就是说只有外层和内层元素都设置浮动，才会脱离文档流。
3，（！！！清除内部浮动！！！）内层元素设置浮动，外层元素不设置浮动和高度，内层元素不能撑开外层元素高度问题，如何解决，如下代码和图？
.par {&&& border: 5px solid #&&& width: 300&&& /*height:110& 注意这里给外层元素设置相应高度，外层元素会包裹内层元素，并占用文档流*/&&& /*float:&& 或者给外层元素设置浮动，外层元素也会包裹内层元素，但不会占用文档流空间*/}.child {&&& border: 5px solid #f66;&&& width:100&&& height: 100&&& float:}&/style&&body&&div class="par"&&&& &div class="child"&&/div&&&& &div class="child"&&/div&&/div&&/body&
---上边给出了2种解决方案，第一种方案，外层元素设置高度，写死了，如果内部元素高度发生变化，外层层元素写死了，不太好。第二种解决方案，会脱离文档流也不太好。最好的解决方案（为外层元素加overflow属性）：.par { overflow: }& //清除内部浮动，外层元素par在计算高度时，par内部的浮动元素child也会参与计算。
@浮动---&浮动是将，块元素的霸道属性，独占一行的行为，取消，允许别的元素对象和他一行。
0，float设计初衷就是为了实现文字环绕效果 http://www.cnblogs.com/liyunhua/p/4670908.html
1，定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
　　---浮动其实是，这个块，从原来的文档流模式中，分离出来，没有了独占属性，它后面的元素对象，就视它不存在。
2，注意下图，加了向左属性后的效果如下图，div1向左漂到body的边界处顶端，div2以为div1不存在了，就跑了上去，div1会覆盖在div2的上面。挡着，遮住了div2，把div2宽度放大就能看到div2。
　　---注意下图中2这个数字没有在原来的位置，而是被div1顶开了，为什么？注意看上边脱离文档流定义，div2会无视div1这个元素，但是div2内的文本依然会为div1让出位置，环绕在div1周围。也就是部分无视。
3，浮动的两种常见应用：
　　---浮动最常用到的就是几个标签元素全部浮动起来，列成一行。例如下图中，如果给div2，加个float:浮动，div2就不会和div1重叠，而是并列一样，同理div3一样。
　　---浮动还有一种应用，就是布局，通常是单个div浮动起来，进行布局。
&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&无标题文档&/title&&& &&style type="text/css"&&& &&& &div{&& &&& &&& &width:100&& &&& &&& &height:100&& &&& &&& &font-size:24&& &&& &&& &font-weight:&& &&& &}&& &&& &#one{background:float:}&& &&& &#two{background:width:200height:200}&& &&& &#three{background:}&& &&/style&&/head&&body&&& &&div id="one"&1,加了浮动属性向左&/div&&& &&div id="two"&2&/div&&& &&div id="three"&3&/div&&/body&&/html&
3，*****口诀：浮动浮动，先浮后动；浮动的对象，会先漂浮起来，离开原来的位置，后动，就是它后面的对象。会向它原来的位置上，动起来。
1，定位的分类
　　---默认值static是无定位的！！！所以不能当做绝对定位的参照物。
　　---相对定位的参照物就是自己。
　　---fixed定位，就是把某个标签元素，放在网站的某一个位置，例如右下角，不管浏览器怎么放大缩小，它就在右下角，即使看不见了，其实它还在右下角。通俗的说，就是把某个标签元素定在网页的某个位置。相对于相对定位和绝对定位，fixed不具有一点的灵活性，所以很多地方不能用fixed，例如遮罩层等等。
　　(1)，什么叫相对定位？
　　Relative，CSS中的写法是：position:& 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以自身为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
　　在文档流中，每个块元素都会被安排到流中的一个位置，我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位，相对定位是相对于该块元素在文档流中的位置的(即相对自己的原始所在位置！假如属性设置为position:top:0left:0，即表示位置不变！相对自己的原始位置没有变化，有的人就会问？既然没有变化，为什么还要加这个属性呢，答案为了充当绝对定位标签元素的参照物，看下边第2条关于绝对定位的参照物问题。)，比如，我们可以使用相对定位把div2放到div1的右侧，代码和示例图如下：
　　#div1&{&&&&border:&1px&solidc&&&&height:&60px;&&&&width:&200px;&&&&margin:2px;}#div2&{&&&&border:&1px&solidc&&&&height:&60px;&&&&width:&200px;&&&&margin:2px;&&&&position:&relative;&&&&top:&-64px;&&&&left:&204px;}#div3&{&&&&border:&1px&solidc&&&&height:&60px;&&&&width:&200px;&&&&margin:2px;}
　　 可以看到一个有趣的现象，那就是虽然我们把div2移走了，但是div1和div3中间还是有一个空间，说明相对定位的元素是会占据文档流空间的，这里的div2就是典型的&站着茅坑不拉屎&。
　　注意，标签中设置了position:属性，不设置left，right和top，bottom的值，这些值则默认值为0。注意，即使不设置值同样起到了相对定位作用，其子孙级别标签使用position:时同样会起到定位效果。
　　(2)，什么叫绝对定位？
　　重点：绝对定位默认是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。&& && 如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。&& && 如果父级设置了position属性，例如position:，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:父元素设置position:，然后TRBL用百分比宽度表示。
　　使用绝对定位也是可以把div2摆到div1的右边的，而且绝对定位是不会占据文档流空间的，如下图，div1和div3之间没有空白：
　　---绝对定位使元素的位置与文档流无关，因此不占据空间(即设置了绝对定位属性的标签，其下边标签会无视其的存在，因为它不占据空间。)。 这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
　　div2的CSS代码：
{&&&&border:&1px&solidc&&&&height:&60px;&&&&width:&200px;&&&&margin:2px;&&&&position:&absolute;&&&&top:&15px;&&&&left:&214px;}
　　绝对定位是个好东西，可以把内容显示到页面上的任何位置，但是对于我们程序员来说，却不能使用太多的绝对定位，因为使用程序动态向div中添加内容，div的大小是不可知的，无法将每一个div的位置都定死。
　　绝对定位是一把双刃剑，使用不好，浏览器或者屏幕的变大缩小，都会使其产生严重的错位变化！！！
　　参考文档：http://blog.chinaunix.net/uid--id-2785537.html
　　注意，绝对定位，一定要选择一个具有相对定位属性，并且位置不会变的标签元素进行定位，才可以。
2，重点，终极解释，关于绝对定位参照物的问题！！！
　　(1)，层级关系为：　　&div &&&&&&&&&&& position: 不是最近的祖先定位元素，不是参照物　　&div&&&&&&&&&-没有设置为定位元素，不是参照物　　&div&&&&&&&- position:relative 参照物　　&div box1　　&div box2 &&&position: top:50 left:120　　&div box3　　效果图：
　　(2)，为改变参照物（橘色框）后的效果　　层级关系为：　　&div &&&&&&&&&&& position:最近的祖先定位元素，参照物　　&div&&&&&&&&&-没有设置为定位元素，不是参照物　　&div&&&&&&&-没有设置为定位元素，不是参照物　　&div box1　　&div box2 &&&position: top:50 left:120　　&div box3　　效果图：
　　(3)，参照物为最顶级的元素情况。　　层级关系为：　　&div &&&&&&&&&&&没有设置为定位元素，不是参照物　　&div&&&&&&&&&-没有设置为定位元素，不是参照物　　&div&&&&&&&-没有设置为定位元素，不是参照物　　&div box1　　&div box2 &&&position: top:50 left:120　　&div box3　　效果图：
　　(4)，仅使用margin属性布局绝对定位元素的情况　　此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。&
　　图9中，使用margin属性布局相对定位元素。　　层级关系为：　　&div &&&&&&&&&&& position: 不是参照物　　&div&&&&&&&&&-没有设置为定位元素，不是参照物　　&div&&&&&&&-没有设置为定位元素，不是参照物　　&div box1　　&div box2 &&&position: margin-top:50 margin-left:120　　&div box3　　效果图：
　　(5)，IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。　　层级关系为：　　&div &&&&&&&&&&& position: 不是参照物　　&div&&&&&&&&&-没有设置为定位元素，不是参照物　　&div&&&&&&&-没有设置为定位元素，不是参照物　　&div box1　　&div box2 &&&position: margin-top:50 margin-left:60　　&div box3　　效果图：
3，终极解决方案：
　　---参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
4，绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置。
阅读(...) 评论() &