css中float属性和position属性详解

CSS float 属性

定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

left    元素向左浮动。
right    元素向右浮动。
none    默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit    规定应该从父元素继承 float 属性的值。

包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素。
首先要说明的浮动元素的第一个特性：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

1.浮动元素在浮动的时候，其margin不会超过包含块的padding
这一点很简单，浮动元素的浮动位置不能超过包含块的内边界。

2.如果有多个浮动元素，后面的浮动元素的margin不会超过前面浮动元素的margin
简单说就是如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

3.如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
（1）包含块的宽度大于两个浮动元素的宽度总和，
这种情况很简单：包含块元素的宽度足够大，两个元素一个向左浮动，一个向右浮动，井水不犯河水。
（2）包含块的宽度小于两个浮动元素的宽度总和
如果包含块宽度不够高，后面的浮动元素将会向下浮动，其顶端是前面浮动元素的底端。

4.浮动元素顶端不会超过包含块的内边界底端，如果有多个浮动元素，下一个浮动元素的顶端不会超过上一个浮动元素的底端
这条规则简单说就是如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。

5.如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

6.浮动元素会尽可能地向顶端对齐、向左或向右对齐

重叠问题
重叠问题是指两个元素再同一个位置，会出现上下重叠的问题。浮动元素如果和普通文档流发生重叠会怎么样呢？
首先浮动元素要怎么样才会发生重叠呢，设置其margin-top为负数即可。
1、行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

使用clear属性的时候要记住：clear只对元素本身的布局起作用。
一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。要解决这样的问题，我们就是要使用清除浮动。
对于非IE浏览器，主要有下面几种方法：

增加额外的div
这是最简单直接的方法，哪里有浮动元素，就在其父级元素的内容中增加一个（作为最后一个子元素）
1 <div style="clear:both"></div>
这样就会清除浮动元素带来的问题。
优点：简单直接，初学者常常使用的方法，也易于理解
缺点：增加额外的无意义标签，不利于语义化，每次清除都要添加额外的空标签，造成浪费

父级元素添加overflow:hidden
这个方法的关键在于触发了BFC，BFC是CSS中的难点之一，我们以后专门来学习这个概念。现在只需要知道它可以清除浮动带来的影响。
1 .clearfix{overflow:hidden;zoom:1}
优点：代码量少，没有额外的标签
缺点：如果子元素超出父元素的范围，会造成超出的部分被隐藏

after伪元素
after表示子元素的后面，通过它可以设置一个具有clear的元素，然后将其隐藏
复制代码
1 clearfix:{
2     zoom:1
3 }
4 clearfix:after{
5     display:block; content:''; clear:both; height:0; visibility:hidden;
6 }
//复制代码
这种方法的原理和第一个方法一样，就是生成一个元素来清除浮动，只是这个元素是“假的”。
优点：没有额外标签，综合起来算是比较好的方法
缺点：稍显复杂，但是理解其原理后也挺简单的
推荐使用这种方法。

float的应用
文字环绕效果
float最初的应用就是文字环绕效果，这对图文并茂的文章很有用。
横向菜单排列

布局
float最经常使用的场景就是布局。使用float可以很简单的实现布局，而且易于理解。

 

CSS position 属性                   
定位 h2 元素：
h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

absolute    
设置了absolute的元素，会寻找距离最近的、并且position属性设置成除static以外的值的父元素作为参照物，如果找不到，就以body作为参照。
设置的left、right、top、bottom，都是相对于这个参照物。
设置了absolute的元素，会脱离文档流（BTW，设置了float属性也会）。
如果绝对定位元素只申明position:absolute，那么其自身定位以及margin的参照物即为其最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框。即没有设置left、top时，left和top的默认值将使元素的位置和“原来的位置”一样。

fixed    
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    
relative值表示相对于原来的位置。什么叫“原来的位置”呢？就是元素不设置position属性（或者设置为static），在文档流中应该存在的位置。 
然后，如果设置：left:10px，就意味着把该元素放置在距离该位置左侧10px的位置，表现为原地向右移动10px。
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

根据第一条规则，一般我们想要让元素相对于某个父元素，那么可以设置该元素为absolute，然后设置父元素为relative（不影响其位置）

static    默认值。
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit    规定应该从父元素继承 position 属性的值。

z-index属性：
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
使用static 定位或无position定位的元素z-index属性是无效的。