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