定位和浮动

定位和浮动

定位(position)

什么是定位

	能把元素定在屏幕的任意位置，该元素脱离文档流。

``
什么是文档流

   文档流指的是元素排版布局过程中，元素会自动从左往右，自上而下的流式布局。

(一) relative (相对定位)

    相对定位的元素相对于自身偏移 
    相对定位的元素不会脱离文档流

(二) absolute (绝对定位)

	使元素完全脱离文档流； 
	相对于 static 定位以外的第一个父元素进行定位,且逐层上找，直到document

(三) fixed (固定定位)

	固定定位的元素总是相对于浏览器窗口进行定位 
	固定定位的元素会脱离文档流

最常用就是以上三种。

z-index

	这里的z指的是屏幕离用户的距离，如果为正数，则离用户更近，为负数则表示离用户更远
	定位都有z-index 
	z-index大的层级在小的前面
	z-index只能应用于定位元素(即设置了position属性非static 值).  

浮动

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 

脱离文档流

所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它  ，两者位置重叠都是可以的。

浮动怎么使用*

一般是父类盒子中的子盒子设置了float:left或float:right CSS属性，导致父类盒子不能被撑开  ，这样就产生了浮动  

浮动后对元素产生的影响

会造成父元素高度塌陷，致使布局混乱

清除浮动的方法

1.先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden
2.clear 属性设置或返回元素相对浮动对象的位置。（记住clear的属性值）
3.伪类
clearfix:before,.clearfix:after{display:table;content:"";}//内容为空，块级表格显示，可用display:block
.clearfix:after{clear:both;}//清除浮动
.clearfix{*zoom:1}（兼容ie 触发haslayout）（推荐）

position:absolute和float的异同

相同点：

可以让元素脱离文档流，内联元素可以设置宽和高

不同点：

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。