脚断整理——CSS篇之定位与浮动

float

Float，会使元素向左或向右移动，其周围的元素也会重新排列。
Float，往往用于图像，但在布局时也很有用。

Float的特性：

1. 浮动的元素会 ”脱离文档“，即不占文档的位置。因此使用口诀：要浮全浮（兄弟元素）。
2. 脱离文档的元素拥有行内块的表现。
3. 不会继承父级的宽度，内容有多大，box就有多大。
4. 可以直接写宽高。
5. margin: auto 对浮动的元素无效。
6. 浮动只在盒子内容区域浮动，不会超出padding区域（水平方向）
7. 浮动的元素一行排不下，会自动换行
8. 浮动的元素压不住文字和图片
   
   

解决闭合浮动的问题（浮动元素撑不开父元素容器）：

• 给父元素添加高度
• 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性： clear: both;
• 给父元素添加overflow:hidden
• 用伪元素闭合浮动（推荐，书写一个公共的类就可以了）

	.clearfix:after{
		content:'';
		display: block;
		clear: both;
		height:0;
		visibility: hidden;
	}
	.clearfix{
		*zoom:1;
	}

	.clearfix:before,
	.clearfix:after{
		content:"";
		display:table;
	}
	.clearfix:after{
		clear:both;
	}
	/*为了兼容IE6，7*/
	.clearfix{
		*zoom:1;
	}

position

position 指定了元素的定位类型

1. 静态定位
   position: static;
   注意事项：偏移位置对于静态定位来说无效

2. 相对定位
   position: relative;
   特点：

   • 移动的原坐标是自身标准文档的位置
   • 相对定位移动的元素不会对别的元素产生影响，原本的文档位置依然还在
   • 可以移动到标准文档的上方
   • 一般用于微调以及配合绝对定位来实现效果

3. 绝对定位
   position: absolute;
   特点：

   • 绝对定位的元素的位置相对于最近的已定位(relative)父元素，如果元素没有已定位的父元素，那么它的位置相对于
   • 绝对定位使元素的位置与文档流无关，因此不占据空间
   • 绝对定位和其他元素重叠
   • 不继承父级的宽度，可以直接写宽高
   • margin: auto 对于绝对定位无效

小技巧：让一个定位盒子水平垂直居中（宽高已知情况下）

	div{
		width: 300px;
		height:200px;
	}

	left: 50%;
	top: 50%;
	margin-left = -150px;	// 自身宽度的一半
	margin-top: -100px;		// 自身高度的一半
	

4. 固定定位
   position: fixed

   特性：

   1. 与文档流无关，因此不占位置
   2. 定位的元素和其他元素重叠
   3. IE7和IE8下需要描述!DOCTYPE才能支持
   4. 元素的位置相对于浏览器窗口是固定位置，即使窗口滚动，它也不会移动。

z-index

定位元素的叠放层级

1. z-index只针对定位元素有效
2. z-index值越大，层级越高
3. 如果父元素已经比较过层级了，那么子元素与子元素之间不会再做比较