### 11.5 浮动
浮动：是为了解决网页的文字环绕问题
浮动 float:
- none 表示不浮动
- left 左浮动
- right 右浮动
- inherit 继承父元素的浮动属性
浮动现象：
- 浮动的元素脱离了标准文档刘，即脱标
- 浮动元素相互贴靠
- 浮动的元素会产生字围效果
- 浮动元素有收缩效果
清除浮动的方式：
- 原因:浮动带来的问题(衬不起父和子的高度)
- 方法一：给父元素添加固定高度(不灵活，后期不易维护)
- 方法二：内墙法
- ```css
内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both;
问题：冗余
```
- 方法三 伪元素清除法 推荐使用
- ```css
添加一个块，一般设置的名字叫clearfix
.clearfix::after{
content:'';
display:block;
clear:both;
}
```
- 方法四 overflow
- ```css
overflow:hidden; 常用，直接在块的属性里加
因为overflow:hidden;会形成BFC区域，形成BFC区域之后，颞部有它自己的布局规则
计算BFC的高度，浮动元素也参与计算
但是小心overflow:hidden它自己的本意
overflow:scroll;出现滚动条
```
### 11.6 定位
定位有哪几种：
```css
position:static(静态定位) | relative(相对定位) | absolute(绝对定位) | fixed(固定定位)
```
相对定位和绝对定位的特征和参考点
```css
相对定位：给一个标准流下的盒子单纯的设置相对定位，与相同盒子没有任何区别 属性有；top|bottom|left|right
参考点：以原来的位置为参考点
应用：1.微调元素 2.做“子绝父相”
绝对定位：脱标 压盖现象
参考点：是否有定位(相对定位、绝对定位、固定定位)的祖先盒子进行性定位，如果没有定位的祖先盒子，以body为参考点。
应用：子绝父相
```
#### 11.6.1 相对定位 relative
特征：
- 与标准文档流下的盒子没有任何区别
- 留“坑”，会影响页面布局
- 参考点：以原来盒子为参考点
#### 11.6.2 绝对定位
㘝贩毒设置一个盒子为绝对定位：
- 以top描述，它的参考点是以body的(0,0)为参考点
- 以bottom描述，它的参考点是以浏览器的左下角为参考点
#### 11.6.3 固定定位
现象：
- 脱标
- 固定不变
- 提高层级
- 参考点：以浏览器的左上角为参考点
z-index
只使用与定位的元素，z-index：auto;
```css
1.z-index 只应用在定位的元素，默认z-index:auto;
2.z-index取值为整数，数值越大，它的层级越高
3.如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。(与标签的结构有关系)
4.从父现象，通常布局方案我们采用子绝父相，比较的是父元素的z-index值，那个父元素的z-index值越大，表示子元素的层级越高
```
#### 11.6.3 子绝父相
以最近的父辈元素的左上角为参考点进行定位
特征：
- 脱标
- 压盖
- 子绝父相
### 11.7 背景background
background
```css
/*设置背景图*/
background-image:url("xiaohua.jpg");
background-repeat:no-repeat; 不平铺
background-repeat-x 表示背景图水平方向上的平铺
background-repeat-y 表示背景图只有垂直方向上平铺
/*调整背景图的位置*/
background-position:-164px -106px;
```
background-position
此属性表示背景图片定位初始位置。background-position是background-position-x和background-position-y的综合属性。如果想使用background-position属性，那么必须先指定background-image属性。
```css
1.background-position:x y;
2.background-position:position position;
3.bacground-position:top left;背景图片在其实位置，即左上角
4.background-position:top right;背景图像在右上角
5.background-position:top center;背景图像上方居中
6.background-position:center center;正中央
7.background-position:bottom right;/*右下角*/
8.background-position:50px 100px;
9.background-position:-20px -30px;用于精灵图
```
border
```css
border-radius 设置圆角或者圆
boeder-radius:100px 设置的小就会形成圆角
```
阴影
```css
box-shadow:水平距离 垂直距离 模糊程度 阴影颜色 inset
```
