浮动，定位及伪类伪元素

浮动

浮动属性可以控制盒子左右浮动，直到边界碰到父对象或另一个浮动对象

1. 基本浮动定位

float:none(默认值，元素不浮动)
float:left（元素向父对象的左侧浮动）
float:right(元素向父对象的右侧浮动)

注意： 设置了向左向右浮动的盒子，整个盒子会做相应的浮动，浮动盒子不再占用原本在文档中的位置，其后续元素会自动向前填充，遇到浮动对象边界停止。

2. 清除浮动属性

 clear:none(默认值，允许浮动)
 clear:left(清除左侧浮动)
 clear:right(清除右侧浮动)
 clear:both(清除左右浮动)
 overflow:auto：（一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：然后我们可以向包含元素添加 overflow: auto;，来解决此问题）

补充：清除了左侧浮动后，该元素就可以忽略前一个元素设置的向左浮动，就避免了（后续元素自动向前填充）这种效果。

定位

使用定位属性（position）可以精确控制盒子的位置，其语法格式如下
position:static|relative|absolute|fixed

1. 静态定位

position:static;
注意：设置position属性的值为static,或者不做设置时默认为static,盒子按照HTML规则定位，一般来说就是自上而下靠左排列.此时定义top,left,bottom,right无意义。

2. 相对定位

position:relative;
即设置盒子相对其原本位置的定位，可以使用top,left,bottom,right定位该盒子相对其原本应显示位置的偏移位置，占用原位置空间，如果有另外一个盒子，则另一个盒子位置不动。

3. 绝对定位

position:absolute;
即使用top,left,bottom,righ等属性值 定位盒子相对其具有position设置的父对象的偏移位置，绝对定位的元素浮于页面之上，不占用原页面空间。（注意：后续元素不收其影响，会填充其原有位置）
（1）若父对象有position属性设置
则该元素 以其父对象为参照绝对定位
（2）若父对象无position属性设置
则该元素脱离其父元素，以浏览窗口为参照偏移位置

4. 层叠定位属性

z-index: 数值（可以为负）;
前三种定位后，被定位的元素会挡住其他元素，此时可以使用层叠定位属性定义页面元素的层叠次序，值大者在上。

5. 粘性定位属性

position: sticky;
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。如果使用（top: 0）则到达其滚动位置时，sticky 元素将停留在页面顶部

6. 固定定位

position:fixed;
通过top,left,bottom,right等属性定位盒子相对浏览器窗口的偏移位置

伪类选择器

伪类选择器可以分为结构伪类选择器和UI元素伪类选择器，结构伪类是通过文档结构的位置关系来匹配特定的元素，从而减少文档内对class和ID属性的定义，从而使文档更简洁；而UI伪类选择器作用在标记的状态上，即指定的样式只在某种转态时才起作用。

结构伪类选择器

（1）基本结构伪类选择器

:root 匹配文档的根元素
:not 对某个结构元素使用样式，但排除其下方子类元素
:empty 指定元素内容空白时的样式
:target 对页面中target元素指定样式

（2）与元素位置有关的结构伪类选择器

:first-child 对父元素的第一个子元素指定样式
:last-child 对父元素的最后一个子元素指定样式

UI伪类选择器

最常用：

`/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}`

其他：

伪元素选择器

 选取元素的一部分并设置其样式

CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

（1）::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。
eg:p::first-line {格式}
（2）::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。注意::first-letter 伪元素只适用于块级元素
（3） ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
（4）::after伪元素
::before 伪元素可用于在元素内容之后插入一些内容。