float浮动、定位position、省略号、圆角

标准文档流：按照元素的特性来进行排列，如行、块元素等

脱离文档流float：沿着父容器靠左或靠右进行排列。float：left/right/none(默认)

float注意点：

只会影响后面的元素

内容默认提升半层（如文字环绕）

默认宽度根据内容决定

换行排列

主要给块元素添加，但也可以给内联元素添加

如何清除浮动？

• 上下排列：clear属性，表示清除浮动，left、right、both
• 嵌套排列：

1. 固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
2. 父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
3. overflow：hidden(BFC规范)；即如果有溢出则隐藏。如果有子元素想溢出，那么会受影响
4. display：inline-block(BFC规范)，不推荐，父容器会影响到后面的元素
5. 设置空标签：不推荐，会多添加一个标签
6. after伪类：推荐，是空标签的加强版，目前各大公司的做法。（添加的内容默认为行内元素，而clear属性只会操作块标签，对内联标签不起作用）。

如.clear:after { content:' ' ; clear : both ; display : block;  }  即content添加的内容为行内的，然后clear：both对行内标签不起作用，所以需要用到display将content内容转换为块元素。其实原理和空标签一样，只不过是伪类方式往里添加的方式。 

position定位

css的position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值：  static（默认）、relative、absolute、fixed、sticky

relative相对定位：

• 如果只是给了相对定位position：relative;而没有定位偏移量(left、right等)，则对元素本身没有任何影响；
• 不使元素脱离文档流（就是在正常文档流下）；
• 不影响其他元素布局（其他元素依然按照之前的模式进行显示）；
• left、top、right、bottom是相对于当前元素自身进行偏移的。

absolute绝对定位：

• 使元素完全脱离文档流（可以理解为与浮动有点类似，不占位置）
• 使内联元素支持宽高（让内联具备块特性，可以理解为把内联转变为块元素）
• 使块元素默认宽根据内容决定（让块具备内联的特性）
• 如果祖先元素有position属性定位设置则相对于该祖先元素发生偏移，没有祖先元素依次都没有position定位，则是相对于整个文档（或浏览器可视区域）发生偏移（绝对、相对、固定）

fixed固定定位：

• 使元素完全脱离文档流
• 使内联元素支持宽高（即让内联具备宽高）
• 使块元素默认的宽度由内容决定（即让块具备内联的特性）
• 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。（如页面上的广告，搜索栏）

sticky粘性定位

• 在指定的位置，进行粘性操作，需配合定位偏移量left、top等。（即元素滑动到所设位置后，将吸附在该位置不进行偏移了）

z-index定位层级

值为阿拉伯数字，默认层级为0。层级越高，显示元素就越排列在最上层。

嵌套时候的层级问题

CSS添加省略号

单行添加省略号：

• width：必须有一个固定的宽度值
• white-space：noweap；不让内容这行，即在一行内显示
• overflow：hidden；隐藏溢出的内容
• text-overflow：ellipsis；添加省略号

CSS Sprite：CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。即也类似用到了定位

CSS圆角

border-radius：  px/%；   可以是一二三四个值。顺时针，从左上角开始。