定位与浮动

传统网页布局

标准流:默认的布局方式，标签按规定排列。
浮动：可以让多个块级元素一行内排列显示。
定位:实现网页中元素精确定位。

标准流与浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
标准流+浮动布局策略：父级用标准流排列上下位置，内部元素用浮动排列左右位置！

清除浮动

1.额外标签法:也称为隔墙法。
clear：both;清除两侧浮动。both | left | right
2.父级添加overflow:hidden属性
3.父级添加after伪元素
4.父级添加双伪元素

父级添加after伪元素

.clearfix:after{content:"";
display：block;
height:0;
clear:both;
visibility:hidden;}
.clearfix{/兼容IE6/7/
*zoom:1;}
代表：网易、百度、淘宝等

父级添加双伪元素

.cleatfix:before, .clearfix:after{
content:"";
display:table;}
.clearfix:after{
clear:both;
}
.clearfix{/兼容IE6/7/
*zoom:1;
}
代表：小米、腾讯

定位position

可以让盒子自由的在某个盒子内移动位置或固定在屏幕的某个位置，并且可以压住其他盒子。
将元素放置在页面的指定位置，主要包括定位模式和边偏移两部分。
定位模式:用于指定元素在文档的定位方式。
边偏移：决定元素的最终位置。

定位模式

position:定位模式；
定位模式;

相对定位relative

position:relative;
相对定位的元素移动时的参考点是自己原来的位置
不脱标:继续保留原先的位置
典型应用:给绝对定位当爹的！子绝父相（大相小绝）

绝对定位absolute

position:absolute;
绝对定位的元素移动时的参照点是祖先元素的位置
如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位元素作为参考点
脱标：绝对定位不再占有原来的位置。

固定定位fixed

position:fixed;
1.始终固定于浏览器的可视区域，以浏览器可的可视窗口为参照点移动元素；
2.不随滚动条滚动；
3.固定定位不占有原先的位置，脱标！

z-index

z-index:层叠等级属性，用于调整重叠定位元素的堆叠顺序。
取值：可为正整数、负整数和0；
默认值为0，取值越大，定位元素在层叠元素中越靠前（上）。