一、
1、position: static; 静态定位。
2、position: relative; 相对定位，元素相对于自己原本在文档中的位置进行定位。
3、position: absolute; 绝对定位，使元素脱离文档流，使内联元素可以设置宽高，
元素相对于父元素为 相对定位的元素进行定位，如果父元素不是相对定位，
或没有设置为相对定位，则一级一级向上找，如果都没有相对定位的元素，
则相对 body 定位。
4、position: fiexd; 固定定位，固定在可视窗口的某个位置。
二、浮动
1、float:left; float:right;
2、同级清除浮动 clear: left ; clear : right ; clear : both ;
3、父级元素清浮
1) 自身添加浮动
2） 添加 overflow : hedden;
3) 为父元素设置不小于子元素的高
4、 添加一个清除浮动的元素。
5、用伪类清浮：
.box:after{
content: '';
display: block;
clear: both;
/*这一句有什么用呢*/
z-index:1;
}三、图文混排
.wrap{
width: 500px;
border: 1px solid red;
}
.content img{
width: 200px;
}
<div class="wrap">
<div class="content">
<img src="a.png">
</div>
</div>1、清除 img 多于的 4px
1）父元素 中添加： line-height: 1px; 只要添加一个行高就可以
2) 设置 img 样式： vertical-align: middle; 或 vertical-align: top;
由于 img 是行内块元素，所以有： vertical-align 属性。
2、实现图片与文字混排，为 img 添加 float: left; 即可。
