浮动适用于横向布局中
float
- left #左浮动
- right #右浮动
说明： 1、被设置了浮动的元素，会半脱离文档流，浮动元素后的内容会往上挤压。出现遮盖情况。（文本不会覆盖，而是出现环绕效果）。
清除浮动：
clear: 清除浮动,使元素不受浮动元素影响作用于浮动元素之后的相邻元素
- left
- right
- both ***
解决方案
在浮动元素后添加一个空的块元素并清除浮动
<div style="clear: both;"></div>
通过伪类选择器，在当前浮动元素的父元素身上，插入内容清除浮动。
.clear_float:after{
content: '';
display: block;
clear: both;
}
#在需要清除浮动的元素上添加class属性值：
<div class="clear_float">content</div>
(案例) - 浮动结合列表实现导航栏:
2、定位（position）
css定位: 描述标签元素在浏览器的显示位置
position:
- relative
- absolute
- fixed
说明：
1.relative: 相对定位,相对于原来的位置定位,原来的位置要占位.
2.absolute: 绝对定位,(脱离文档流),原来的位置不占位.
元素会根据离它最近的外层并且设置有position的元素定位,
如果没有则根据body进行定位
3.fixed: 绝对定位,(脱离文档流),但是它相对于浏览器框体定位
当元素被position修饰后，可以通过如下的属性修改位置：
left： 距离左侧的位置
top：距离顶部的位置
right：距离右侧的位置
bottom：距离底部的位置
绝对定位后的元素可以使用z-index设置层级：
z-index: n; //n（整数），n越大，越在最上层
二、其他属性
1、超出部分控制
overflow: hidden/auto/scroll
- hidden: 超出部分隐藏
- auto: 超出部分显示滚动条如果未超出则不显示
overflow-x: 控制横向
overflow-y: 纵向
2、元素是否允许编辑
#元素属性
contenteditable
- true //当前元素允许编辑
案例：
<div contenteditable="true">content</div>
3、输入框的样式
input {
border: 0; //清除边框
outline: none; //清除外边线
background-color: rgba(0, 0, 0, 0); //背景完全透明
}
CSS3特性
一、圆角
border-radius
二、设置阴影
box-shadow
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注释：
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
案例：div设置阴影
box-shadow: 10px 10px 5px gray;
三、文字阴影
text-shadow
语法：
text-shadow: h-shadow v-shadow blur color;
注释：
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。
四、渐变
#线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
注释：
direction 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。
案例：
从左侧开始的线性渐变，从红色开始，转为黄色:
linear-gradient(to right, red , yellow);
从左上角到右下角的线性渐变:
linear-gradient(to bottom right, red , yellow);
线性渐变指定一个角度:
linear-gradient(180deg, red, yellow);
从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束
linear-gradient(0deg, blue, green 40%, red);
