今日学习：CSS的浮动传统网页布局的三种方式
1.标准流（标签按照默认的方式进行排列）
块元素会独占一行，从上到下排列
行内元素是按照顺序，从左到右排列，碰到父元素边缘会自动换行
2.浮动
很多的布局效果用标准流无法完成，浮动可以更好的来控制盒子的位置
浮动的属性：
float
值：
none：不浮动
left：左
right：右
总结：
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
浮动最典型的应用就是让多个块级元素一行内排列显示
浮动的特性：
1）会脱离标准流
2）会一行内显示，并且沿顶部对齐，相邻元素之间没有间隙，超过父级宽度会自动换行
3）具有行内块元素的特性
4）浮动研发之初就是为了实现文字环绕，所以浮动盒子不会盖住标准盒子的文字
注意点：
1）先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置
2）理论来说，当一个元素浮动了，那么他的兄弟元素也要跟着浮动
3）浮动只会影响后面的标准流，不会影响前面的
清除浮动
为什么清除：
由于父盒子在一些情况下不方便给高度，但子盒子浮动又不占位置，所以父盒子的高度就会变成0，会影响后面的标准流盒子
清除浮动的方法：
1）额外标签法
也叫做隔墙法，是W3C推荐的做法
在大盒子最后加入一个class=“clear”
. class {
clear:both;}
注意点：
要求新的空标签必须是块级元素
优点：
通俗易懂，书写方便
缺点：
会添加很多没有意义的标签，结构化差
2）给父级添加overflow：hidden；
3）给父级添加after为元素
.clearfix:after{
content: "";
display:block;
height:0;
clear:both;
visibility:hidden;
}
4）给父级添加双伪元素
给li清除格式，list-style：none；
3.定位
定位的组成
定位=定位模式+边偏移（position：；+方位）
定位模式是指一个元素在文档中的定位方式，边偏移决定了改元素的最终位置
定位模式：
static：静态定位
relative：相对定位
absolu：绝对定位
fixed：固定定位
静态定位：
是元素的默认定位方式，也就是没有定位的意思
静态定位是按照标准流的特性来摆放盒子的，没有边偏移
相对定位：
特点：
相对于原来的位置进行移动
原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它（相对定位不脱标）
绝对定位
是元素在移动的时候，在相对于他的祖先元素来说的
特点：
如果祖先元素没有定位，就以浏览器为标准进行定位
如果祖先元素有定位，就以有定位的最近的一级祖先元素为标准
绝对定位不会再占有原来的位置，脱离标准流
子绝父相
如果儿子是绝对定位，那么父亲就用相对定位来限制儿子的边偏移的边界
固定定位
概念：
固定定位是元素固定于浏览器可以视区域的位置
特点：
以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系
固定定位，不再占有原来的位置（脱标）
定位的叠放次序
在使用定位的时候，会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序
注意点：
数值可以是正整数 复数 或0，默认值是auto，数值越大，盒子越靠上
如果属性值相同，按照书写顺序，后来居上
数字后不可以加单位
只有定位的盒子才有z-index属性
|
