浮动与定位

1.浮动

（1）、标准流

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

 

CSS的定位机制有3种：普通流（标准流）、浮动和定位

 

（2）浮动

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

 

现在用浮动的特性来布局

（1）浮动的分类

属性值：left   元素向左浮动

roght   元素向右浮动

none   元素不浮动（默认）

 

浮动特征：

浮动脱离标准流，占位置，会影响标准流

浮动首先创建包含块的概念。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

总结：

   1、浮动后的元素会漂浮在其他元素上边

    2、浮动后的元素是不占原来的位置

    3、浮动后的元素不能超出父元素的范围

    4、浮动后的元素在同一水平线上显示

    5、浮动后的元素会自动的转化为行内块元素

    6、浮动后的元素不能超出父元素的内边距和边框

 

清除浮动造成的影响的方法：

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

 

1.额外标签法：

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

<div style=”clear:both”></div>，或则其他标签br等亦可。

2.父级添加overflow属性方法

overflow为hidden 、auto、scoll

3.伪元素清除浮动

：:after 方式为空元素的升级版，好处是不用单独加标签了

.clearfix:：after {  

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden; 

}

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

 

双伪元素清除浮动：

.clearfix:before,.clearfix:after {
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

可以通过触发BFC的方式，可以实现清除浮动效果

(BFC后面讲解Block formatting context，块级格式化上下文)

 

定位：

定位属性：

top：顶端偏移量 

bottom  底端

left   左侧

right  右侧

 

定位的分类：

position：属性常用值

static 自动定位（默认）

relative  相对定位  对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

absolute  绝对定位绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

fixed   固定定位   

1、固定定位的元素跟父亲没有任何关系，只认浏览器。

2、固定定位完全脱标，不占有位置，不随着滚动条滚动。

 

1.父级没有定位：

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

2.父级有定位

绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

子绝父相

 

 

定位模式转换：

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换， 都转换为行内块模式，行内块的宽度和高度跟内容有关系。

因此比如行内元素如果添加了绝对定位或者固定定位后，浮动后，可以不用转换模式，直接给高度和宽度就可以了。

 

层叠次序：

当多个元素同时设定定位时，定位元素之间有可能发生重叠

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。