- CSS的浮动
- 传统网页布局的三种方式（标准流、浮动、定位）
- 标准流（标签按照默认的方式进行排列）
- 行内元素是按照顺序，从左到右依次排列，碰到父元素的边缘就会自动换行
- 浮动
- 为什么需要浮动
- 很多的布局效果用标准流无法完成，浮动可以更好的来控制盒子的位置。
- 总结：
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
- 浮动的特性
- 2、浮动的元素会一行内显示并且沿元素顶部对齐，相邻的元素之间没有空白间隙，如果超过父级宽度会自动换行显示
- 4、浮动研发之初就是为了实现文字环绕的，所以浮动的盒子并不会压住标准流盒子里面的文字
- 浮动布局的注意点
- 1、先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置。
- 2、理论上来说，当一个元素浮动了，那么它的兄弟元素也要跟着浮动。
- 3、浮动只会影响后面的标准流，不会影响前面的标准流。
- 清除浮动
- 为什么要清除浮动
- 由于父盒子在一些情况下不方便给高度，但是子盒子浮动又不占位置，所以父盒子的高度就会变成0，会影响后面的标准流盒子
- 清除浮动的方法
- 1、额外标签法
- 也叫做隔墙法，是W3C推荐的做法
 
- 2、给父级添加overflow:hidden;
- 例
- 3、父级添加after伪元素
- 例
 
- 4、给父级添加双伪元素
- 例
 
- CSS的定位
- 定位的组成
- 定位模式指的是一个元素在文档中的定位方式，边偏移决定了该元素的最终位置
- 静态定位static
- 静态定位是元素的默认定位方式，也就是没有定位的意思。
- 静态定位是按照标准流的特性来摆放盒子的，没有边偏移
- 例
- 相对定位relative
- 相对定位的例子
- 特点：
- 2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它（相对定位不脱标）
- 绝对定位absolute
- 概念：
- 绝对定位是元素在移动的时候，是相对于它的祖先元素来说。
- 例
- 绝对定位的特点
- 如果祖先元素有定位，就以有定位最近的一级祖先元素为标准
- 子绝父相
- 如果儿子是绝对定位，那么父亲就用相对定位来限制儿子的边偏移的边界。
- 例
- 固定定位 fixed
- 特点：
- 1、以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系
- 例
- 定位的叠放次序
- 在使用定位的时候会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序
- 注意点：
- 数值可以是正整数、负整数或者0，默认值是auto，数值越大，盒子越靠上
- 例
|
