原文地址：http://www.cnblogs.com/coffeedeveloper/p/3145790.html#html

转载内容：

对CSS中的Position、Float属性的一些深入探讨

对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性，对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨。

本文主要探讨点：

Position、Float属性的基本使用方法
Position、Float属性对元素所造成的影响
Position、Float属性交叉使用上面的影响
Position、Float属性使用上的小技巧

本文结构点：

HTML布局的基本要点
盒子模型
HTML的普通流
Position属性
属性值介绍
用法介绍
一些关于position的小知识
Float属性
属性值介绍
用法介绍
与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; }

</style>

<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。

Static

所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。

Relative

俗称的相对定位，重点在于对相对理解。我们此前说过每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。
我们先用块状元素来做个示例：

<style type="text/css">

div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }

</style>

<div style="background: blue">A</div>

<div style="background: red; position: relative; top: 20px; left: 20px;">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; }

</style>

<strong>strong</strong><em>em</em><span>span</span>

请注意看，在这里我是有对span进行width属性的赋值（为100px）。但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，换而言之，position: relative并没有改变行内元素的Display属性，这个概念非常重要（注意与接下来的absolute的区别）。

Absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

我们先用一个默认嵌套的DIV来做示例

<body style="background: yellow;">

    <div style="background: #fff">

        A

        <div style="background: #81b6ff">

            A - 1

            <div style="background: #b6ff00;">

                A - 2

            </div>

        </div>

    </div>

</body>

现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值

<body style="background: yellow;">

    <div style="background: #fff">A

        <div style="background: #81b6ff">A - 1

            <div style="background: #b6ff00; position: absolute; 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: #fff; width: 200px;">A

    <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1

        <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2

        </div>

    </div>

</div>

3）在IE6/7中设置position属性后会导致z-index属性失效

<!-- 解决方案，父元素设置一个更大的z-index值即可 -->

<div style="z-index: 2;">

  a

    <div style="position: relative; z-index: 1;">

      b

    </div>

</div>

4）行内元素在应用了position：absolute之后会改变display。

<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">

        我的display属性由inline变成了block

</span>

因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block。

5）应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。

Fixed

在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：

会改变行内元素的呈现模式，使display之变更为block。
会让元素脱离普通流，不占据空间。
默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

Float属性

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:relative; float:right; left:50px; top:10px;">div</div>

左图中的div是没有设置top、left值的，而右边则设置了50px的偏移。

2）元素同时应用了position: absolute及float属性，则float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">

我是一个应用了position：absolute和float：left的DIV，不过我还是在浏览器的右边，没有浮动到左边。

</div>

3）第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

<div style="position: absolute; left:10px; top: 10px;">

    我是一个应用了position：absolute的DIV。

</div>

<div style="float:left; background: red; width: 300px; height: 150px; ">

    我是float：left的DIV

</div>

回顾：如果你不将float的元素的position设置成relative的话，你想通过设置float元素的z-index来的达到覆盖position:absolute是无效的。同理，float元素下面存在position: absolute的子元素，如果你不将float的元素的position设置成relative的话，absolute元素是不会定位到float元素的。

4）同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。
常用的清除浮动的方法有两种：

通过在容器中添加一个标签，设置该标签的样式为 clear: both
容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;">

    <div style="float: left; position: absolute;">我是DIV</div>

    <div style="clear: both;"></div>

<div>

CSS转载备忘的更多相关文章

[转载]备忘：oh my zsh 的安装、更新、删除
备忘:oh my zsh 的安装.更新.删除傅易君关注 0.8 2016.09.25 00:56* 字数 68 阅读 14920评论 0喜欢 4 查看系统当前 shell $ cat /etc/ ...
MSSQL中建立分区表（转载备忘）
转载自CSDN地址:http://bbs.csdn.net/topics/330087045 SQL Server 2005 分区表实践——建立分区表(partition table) 问题:有一个订 ...
CSS学习备忘
CSS样式控制行间距,用line-height 测试一下: <div style="line-height:6px"> 111<br> 222<br& ...
一些CSS知识点备忘
RGBA指的是“红色.绿色.蓝色和Alpha透明度”(Red-Green-Blue-Alpha). HSLA代表“色调.饱和度.亮度和Alpha透明度”(Hue-Saturation-Lightnes ...
ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法，转载备忘)
有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...
c# 加密转载备忘
public sealed class EncryptUtils { #region Base64加密解密 /// <summary> /// Base64加密 /// </summ ...
关于在linux下清屏的几种技巧（转载-备忘）
原文地址:http://www.cnblogs.com/5201351/p/4208277.html 在windows的DOS操作界面里面,清屏的命令是cls,那么在linux 里面的清屏命令是什么呢 ...
【转载备忘】PowerDesigner16.5基本使用
这两天都在设计数据库,使用了powerdesigner进行设计的,然后摸索了好久,本来打算写一篇文章来记述一下的,写了一半,突然发现网上早就有比我写的好的文章了,所有删了之前写的,直接贴出来那个文章的 ...
js-new、object.create、bind的模拟实现【转载备忘】
//创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } function _ ...

随机推荐

生成HFile文件后倒入数据出现Caused by: java.lang.ClassNotFoundException: org.apache.hadoop.hbase.filter.Filter
数据导入的时候出现: at java.lang.Class.getDeclaredMethods0(Native Method) at java.lang.Class.privateGetDeclar ...
实现FileCopy（Ring0 x86 x64）
1.1 内核不接受一个字符串文件路径,必须填写一个OBJECT_ATTRIBUTES结构. 这个结构,在InitializeObjectAttributes初始化 typedef struct _OB ...
[Oracle]ocilib绑定数组实现批量写入
#include "ocilib.h" #define INSERT_SQL_00 MT("INSERT INTO C_PICRECORD_00 (ID, DEV_ID) ...
MySQL必知必会笔记<2>
[英]ben Forta著 5 1.0 *使用扩展查询* |---->select note from table where Match(note) Against('anl'); |- ...
C语言的本质（7）——C语言运算符大全
C语言的本质(7)--C语言运算符大全 C语言的结合方向 C语言中各运算符的结合性分为两种,即左结合性(自左至右)和右结合性(自右至左).例如算术运算符的结合性是自左至右,即先左后右.如有表达式 x- ...
POJ——字符串插入
2:字符串插入查看提交统计提问总时间限制: 1000ms 内存限制: 65536kB 描述有两个字符串str和substr,str的字符个数不超过10,substr的字符个数为3.( ...
php解决与处理网站高并发大流量访问的方法
方法/步骤首先,确认服务器硬件是否足够支持当前的流量普通的P4服务器一般最多能支持每天10万独立IP,如果访问量比这个还要大, 那么必须首先配置一台更高性能的专用服务器才能解决问题 ,否则怎么 ...
嵌入式OS入门笔记-以RTX为案例：六.RTX的任务调度
嵌入式OS入门笔记-以RTX为案例:六.RTX的任务调度上一篇笔记介绍了一些绕开排程器(或调度程序,scheduler)来进行时间管理的一些小方法.这一篇详细介绍RTX的任务调度原理. RTX主要有 ...
如何生成log新信息背景图片和在图片上添加水印
在图片上添加文字水印,其实就是要用到两个类, using System.Drawing; using System.Drawing.Drawing2D; 废话不多说了,直接上代 ...
Repeater的ItemCommand事件和ItemCreated事件，高手请跳过~
捣鼓这几天,我终于比之前更能区别Repeater的ItemCommand事件和ItemCreated事件了当Repeater的dataSource是sqldataSource的话,要想触发ItemC ...

CSS转载备忘