元素的浮动
浮动（float），元素可以围绕其他元素向左或者向右，而不能上下移动，往往用于图像。
浮动可以使元素脱离文档流，使用float来定位，clear清除定位。
float属性
float有三个属性：left，right，none
特点：设置浮动后，脱离文件流，原有为之丢失。
文档流
文档流是相对于盒子模型来说，正常文档流是标签所处的一个空间，脱离文档流就是标签所处的空间之上的空间。
脱离文档流的元素不是固定的，没有块级和行级属性
clear属性
单侧清除浮动
加上clear：right；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
height: 200px;
width: 200px;
float: right;
border: 2px solid;
}
.box2{
height: 200px;
width: 200px;
float: right;
clear: right;
border: 2px solid;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
</html>
处理空位
侧栏向右浮动且短语主内容区域，页脚（footer）会按浮动要求向上跳动
clear：both; 可以帮助页脚不向上
元素的定位
static
是元素默认定位，处于文档流中，忽略left等属性产生的效果
relative
相对定位，参照物为自身，相对于自身在文档流中所处位置进行定位
与浮动不同，仍处于文档流中，且原先占有位置保留
absolute
绝对定位脱离文档流，参照物为第一定义属性
fixed
固定布局是脱离文档流，参照物为浏览器窗口，不会因为滚动条移动而移动
CSS伪类
概念
伪类对元素分类是基于特征，而不是名字、内容或属性。同一个标签，不同种状态，有不同的样式
伪类是用来添加一些 选择器 的特殊效果
用途：
设置鼠标悬停在元素上时的样式；为已访问或未访问链接设置不同样式；设置元素获得焦点时的样式
分类
动态伪类-适用于任何元素
：hover
悬停，鼠标放到标签上时
：active
激活，点击标签不松手时
：focus
某个标签获得焦点时的样式
（获得焦点，鼠标点过去一闪一闪）
静态伪类-适用于超链接
a：link{} 未访问链接
a:visited{} 已访问链接
a:hover{} 鼠标划过链接
a:active{} 已选中链接
注意：顺序不能乱，要不然会失效
伪元素
概念
用于创建一些不在文档树中的元素，并为其添加样式
伪元素也是用来添加一些 选择器 的特殊效果
注意：伪元素使用：：两个冒号
类型
::first-letter
选择元素中第一个文字
::first-line
选择元素中第一行文字
::before
在元素内容之前添加新的内容
ex:
div::before{
content:"";
}
::after
在元素内容之后添加新内容
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
