CSS中Position、Float属性深刻探讨

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

　　本文主要探讨点：

1. Position、Float属性的基本使用方法
2. Position、Float属性对元素所形成的影响
3. Position、Float属**叉使用上面的影响
4. Position、Float属性使用上的小技巧

　　本文结构点：

　　1.HTML布局的基本要点

　　盒子模型

　　HTML的普通流

　　2.Position属性

　　属性值介绍

　　用法介绍

　　一些关于position的小知识

　　3.Float属性

　　属性值介绍

　　用法介绍

　　与Position之间的兼容问题

　　HTML布局的基本要点：

　　若是要掌握、运用好Position、Float属性必需要对HTML的两个基本点有清晰的了解。

　　1.盒子模型(box model)

　　2.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源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。(以下图)

01	<style type="text/css">

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

03	strong { background: #808080; }

04	em { background: #ffd800; }

05	span { background: #b6ff00; }

06

</style>

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

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

09	<div style="background: red">B</div>

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

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

　　咱们先用块状元素来作个示例：

1	<style type="text/css">

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

3

</style>

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

5	<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>

6	<div style="background: green">C</div>

　　右图中的黑色虚线部分为元素B的默认普通流位置，而黄色线则表明元素B的相对偏移量。咱们能够很明显的看出在元素C依然仍是保留在原位，并无由于元素B发生了偏移而随之变化。

　　咱们再来看看行内元素(在这里用你们最经常使用的span来作示例)

1	<style type="text/css">

2	strong { background: #808080; }

3	em { background: #ffd800; }

4	span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }

5

</style>

6	<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来作示例

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

2

A

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

4

A - 1

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

6

A - 2

7

</div>

8

</div>

9

</div>

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

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

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

3	<div style="background: #b6ff00; position: absolute; top: 0; left: 0;">

4	A - 2</div></div></div>

　　能够看到(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。

1	<div id="a" style="background: #fff; width: 200px;">A

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

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

4

</div>

5

</div>

6

</div>

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

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

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

3

a

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

5

b

6

</div>

7

</div>

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

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

2	个人display属性由inline变成了block

3

</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，有几个要点：

　　1.只有横向浮动，并无纵向浮动。

　　2.当元素应用了float属性后，将会脱离普通流，其容器(父)元素将得不到脱离普通流的子元素高度。

　　3.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)，与应用了position的元素相比浮动元素并不会遮盖后一个元素。

　　4.浮动元素的前一个元素不会受到任何影响(若是你想让两个块状元素并排显示，必须让两个块状元素都应用float)。

　　与position的兼容性问题

　　1)元素同时应用了position: relative、float、(top / left / bottom / right)属性后，则元素先浮动到相应的位置，而后再根据(top / left / bottom / right)所设置的距离来发生偏移。

1	<div style="position:relative; float:right; left:50px; top:10px;">div</div>

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

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

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

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

3

</div>

　　3)第一个元素应用了position以后会覆盖着接下来的float元素(若是两个元素所处的位置相同)

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

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

3

</div>

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

5	我是float：left的DIV

6

</div>

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

　　4)同时应用position: absolute和float: left会致使清除浮动无效(position: relative则能够清除浮动)。

　　经常使用的清除浮动的方法有两种：

　　1.经过在容器中添加一个标签，设置该标签的样式为 clear: both

　　2.容器设置overflow: hidden

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

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

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

4	<div></div></div>