1.float浮动
文档流
文档流是文档中可显示对象在排列时所占用的位置
float特性
加浮动的元素，会脱离文档流，沿着父容器靠左或靠右排列；如果之前已经有浮动元素，会挨着浮动的元素进行排列
float取值
left、right、none
2.float注意点
(1)float只会影响后面的元素
(2)被影响的元素如果有内容，那么它的内容(content)默认提升半层
(3)加了浮动后，未加宽度的元素的宽度由内容决定
(4)加了浮动的元素如果在父容器中排列不下时，它就会换行排列
(5)主要给块元素添加，也可以给内联元素添加
3.清除浮动
为什么要清除浮动？不希望浮动的元素对后面的元素产生影响。同时也不能影响布局。
上下排列的元素:
(1)clear属性，表示清除浮动,left,right,both
clear属性加在受浮动影响的元素上
嵌套排列的元素:
(1)固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
(2)父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
(3)overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
(4)display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
(5)设置空标签 : 不推荐 , 会多添加一个标签。
(6)after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
通过:after伪类所增添的元素是一个内联类型的元素，不会受到clear属性的影响，所以需要将其转给块(block)标签，之后再clear:both
4. 定位
position 定位
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left则决定了该元素的最终位置
position的取值:
static (默认)
relative:相对定位
absolute:绝对定位
fixed:固定定位
sticky:黏性定位
(4.1) relative - 相对定位
(1) 对元素加上相对定位后，如果没有定位偏移量，那么对元素本身没有任何影响
(2) 对元素加上相对定位后，不使元素脱离文档流
(3) 对元素加上相对定位后且定位偏移量，也不影响其他的元素布局
(4) left、top、bottom、right是相对于当前元素自身进行偏移的
相对定位指的是相对于自己当前的位置进行移动
（4.2) absolute - 绝对定位
(1) 对元素加上绝对定位后，会使元素完全脱离文档流
(2) 对内联元素加上绝对定位后，使内联元素支持宽高 （让内联具备块特性）
(3) 对块元素加上绝对定位后, 使块元素默认宽根据内容决定（让块具备内联的特性）
(4) 如果祖先元素有定位, 那么相对于祖先元素发生偏移，如果祖先元素没有定位，那么相对于整个文档发生偏移（祖先元素可以是相对定位、绝对定位、固定定位）
(4.3) fixed - 固定定位
(1) 对元素加上固定定位后，会使元素完全脱离文档流
(2) 对内联元素加上固定定位后，会使内联元素支持宽高 （让内联具备块特性）
(3) 对块元素加固定定位后，会使块元素默认宽根据内容决定（让块具备内联的特性）
(4) 对元素加上固定定位后, 会使元素相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响 (没有祖先元素的特性)
(4.4) sticky - 黏性定位
(1)在指定的位置，进行黏性操作。
div{background: red;position: sticky;top: 0;}
(4.5) z-index定位层级
默认层级为0，可以为正数，也可以为负数
嵌套时候的层级问题
比较的时候先看同一级别，先比较父元素的层级与外部元素的层级，如果父元素没有写层级，则将父元素中的子元素的层级与外部元素的层级进行比较。
5. CSS 添加省略号
(1) width: 必须有一个固定的宽
(2) white-space:nowrap: 不让内容折行
(3) overflow : hidden :隐藏溢出的内容
(4) text-overflow : ellipsis :添加省略号
6. CSS Sprite
特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开
