王龙飞-CSS-20221115 - 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

1. 传统的网页布局方式：标准流，浮动，定位

2. 块元素独占一行，从上到下一次排列；行内元素会从左到右依次排列，碰到父元素边界会自动换行；标准也叫默认排列（标准流）

3. 浮动：为社么需要浮动？很多布局效果，用标准流无法完成，浮动可以更好的控制盒子的位置；

属性：float 值：none 不浮动； left：左浮动右：right

总结：多个块级元素横向排列，找浮动，纵向排列用标准流

浮动最典型的应用，就是让盒子(即块级元素)一行内排列显示

浮动的元素会在一行内显示，并且沿元素顶部对齐，相邻之间的元素没有对齐，如果超过父级元素会自动换行显示；；

浮动研发之初就是为了实现文字环绕，所以浮动的盒子并不会标准流盒子里面的文字；；；；

注意点：先用标准流父元素进行上下排列，内部的子元素使用浮动排列左右；；；；理论上来说，当一个元素浮动了，那么他的兄弟元素也要跟着浮动----浮动不会影响前面的标准流，只会影响后面的标准流。

清除浮动：为社么要清除浮动：由于父盒子在一些情况下不方便给高度，但是盒子浮动又不占位置，所以高度为0了，会影响后面的标准流

清除浮动的方法：额外标签法，注意点：要求最后的新标签必须是块级元素，

优点：书写方便，通俗易懂缺点：会添加没有意义的标签，结构化差；；；

2. 定位模式指的是一个元素在文档种的定位上市，边偏一决定了该元素的最终位置

3. 静态定位：是按照标准流的特性去摆放盒子的，没有边偏移

4. 相对定位 relative：特点：他是相对于自己原来的位置进行移动；；；原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待他，（相对定位脱标）

5. 绝对定位 absolute：是元素在移动时候的时候，相对于他的祖先来说的，如果祖先元素没有定位，就以浏览器为标准进行定位；；；祖先有定位，就以最近的一级祖先元素为标准；；；绝对定位会脱标

6. 子绝父相：如果儿子是绝对定位，那么父亲就用相对定位限制儿子的偏移量

7. 固定定位 fixed：固定定位是元素固定于浏览器的可视位置；；以浏览器的可视窗口来做参考点的，进行偏移，跟父元素没有关系；；固定位置会进行脱标