1.为什么要清除浮动？
因此在一些盒子中不方便赋予高度，比如在新闻文章中，文章内容每天是不定的。
浮动的图片，不能跨越 内边距。
清除浮动，是在父盒子不给定高度的情况下，若子盒子都为浮动，即父盒子没有了高度，height=0，下一个盒子可能“顶上来”，若给定父盒子高度，子盒子的内容可能会超出父盒子边界。
1.1若设置 clear:both （清除所有浮动）可解决（clear：left 清除左浮动；clear:right 清除右浮动），父盒子高度随子盒子最大而定。
1.2 在最后一个子盒子后边添加一个便签，如div <div class="clear"></div> \ 或者 <div style="clear:both"></div>
.clear{
clear:both;
}
1.3 父级标签添加 overflow:hidden ,触发BFC 机制；
1.4 伪类元素after 清除浮动
.clearfix: after {
content:" ";
display:block;
clear:both;
visibility:hidden;
height:0;
}
.clearfix {
*zoom:1;
}
1.5 双伪类标签清除浮动
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1; // 考虑到IE6、7的兼容性
}
<div class="nav" clearfix>
</div>
2.相对定位（position:relative）top: npx; right:n2px;
以自己盒子的左上角为中心，向下移动npx,向右移动n2px; 移动后原位置保留，浮动元素不能“顶上去”；
3.绝对定位（position:absolute）top:n1px; left:n2px; 绝对定位，不占位置。
无父盒子无定位的情况下，以当前屏幕的页面左上角为中心，向上左方向移动。
right:0px;bottom:0px;以右下角为中心。
若父元素有定位，则以父元素 左上角为基准；若父元素无定位，父父元素有定位，则以父父元素左上角为基准，以此内推。
4.“子绝 父相” 子盒子绝对定位，父盒子相对定位。
在广告栏中经常出现 滚动的小圆圈广告。小圆圈为子盒子，悬停在图片上，不占空间，因此可以为绝对定位。对父盒子而言，如果其为绝对定位，那其不占空间，子盒子为相对定位时，无法以父盒子为基准，可能跑出父盒子外，再者，与父盒子相邻的其他盒子元素会“顶上来”。
5.浮动 并不是真正意义上的完全“脱标”，能做到完全“脱标”的是position:absolute;
eg:<div class=“star”>小星星</div>
<div>小月亮</div>
.star {
float：left；
}
.star {
position:absolute;
}
第一种后面那个div 会“顶”上去，但其内容文字还是在原位置，因此不是完全的“脱标”；
第二种 则是全部“顶”上去。
6.定位的盒子居中对齐
例如在轮播效果图中位于轮播图之上的小圆圈，
若盒子加了定位，position:absolute; 或浮动 float：left /right。则margin:0 auto 盒子居中对齐失效。
7.绝对定位：Position：absolute,表示元素无固定位置，在屏幕上可任意滑动覆盖，当元素属性为绝对定位，有隐式转换为行内块元素的作用，大小与内容有关。可设置 top.left,right,bottom 的值，即在父盒子的上、左、右、下方位多少；
将盒子都为绝对定位，下面其他的盒子会“顶”上去。后来者居上，重叠上去。
固定定位是特殊的绝对定位，只是以当前所见的浏览器为“父”。例如某网站左右侧栏广告一直显示效果，并不随滚动条移动而变化。
8.只有定位才有层叠属性：z-index:0(默认为0)，数字越大，层级越高，即将层叠与其他图片之上显示。在下拉菜单中很常见。
9.相对定位，绝对定位，固定定位都是“脱离”标准流的（浮在标准流上），只不过相对定位占有固定位置，（相对定位比标准流高一级）绝对定位和固定定位不占用位置。
相对定位由于占有位置，在将浮动元素设置为相对定位时，它会第一个浮动出现（若不设置其他元素z-index ）。
标准流 设置相对定位，层级提升。若都为相对定位，设置z-index 属性大小，层级提升，优先显示。