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