传统网页布局的三种方式
标准流
标准流就是标签展昭规定好的默认顺序方式排列
1、块级元素会独占一行，从上到下顺序排列
2、行内元素会按照顺序，从左到右进行排列，碰到父元素的边缘会自动换行
浮动
为什么需要浮动
有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列方式。
浮动的最典型的应用
可以让多个块级元素一行内排列显示
网页布局的准则：
多个块级纵向排列找标准流，多个块级元素横向排列找浮动
浮动的语法：
float属性可以创建浮动
属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
浮动的特性
1、浮动的元素会脱离标准流（脱标）
2、浮动元素会一行内显示并且元素顶部对齐
3、浮动元素会具有行内块元素的特性
4、浮动的元素不会压住下面盒子的文字内容，因为浮动的特性就是为了做到文字环绕的
5、浮动的元素之间默认是没有空隙的
浮动布局注意点
1、浮动和标准流父盒子的搭配
先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
2、一个元素浮动了，其他的兄弟元素理论上也要跟着浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
为什么要清除浮动？
如果父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度的话，后面的标准流会紧挨着父盒子来进行排列，所以要清除浮动。
额外标签法（隔墙法）
W3C推荐的做法，但我们实际工作中基本不用
给父级标签添加overflow属性
给父级添加after伪元素
父级添加双伪元素
定位
为什么需要使用定位？
当我们滚动屏幕的时候，定位可以将盒子固定到屏幕的某个位置
某个元素可以自由的在盒子内移动位置，并且会压住盒子
定位的使用
定位=定位模式+边偏移
定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置。
定位模式：
position:static; （静态定位）
position的默认定位方式，是无定位的意思，没有边偏移，基本不用
position:relative;（相对定位）
特点
1、它是相对于它自己原来的位置来进行移动的（参照点是自己原来的位置）
2、原来位置的标准流位置继续占有，后面的盒子仍然以标准流的方式来对待它
3、相对定位没有脱标
position:absolute;（绝对定位）
1、如果没有祖先元素或者祖先元素没有定位胡，则以浏览器为标准进行定位
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
3、绝对定位不再占有原来的位置（脱标）
4、相对定位最大的作用就是给绝对定位当爹的（子绝父相）
|
