<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ padding:0margin:0font-size:14px }
body{
background: grey
}
.d{
position:fixedmargin:autoleft:0right:0bottom:24pxwidth: 160pxheight:120px
animation: d1 3s linear animation-fill-mode: both
}
@keyframes d1{
from{
bottom: 24px
}
to{
bottom: 360px
}
}
.d img{
height:120pxposition: absolutemargin:autoleft:0top:0animation: d2 2s 3s linear infinite animation-fill-mode: both
}
@keyframes d2{
0%,100%{
transform:rotate(0deg)
}
50%{
left: 40px
transform:rotate(90deg)
}
}
</style>
</head>
<body>
<div class="d">
<img src="http://aimusic.image.alimmdn.com/Image/6d235b11f15838d6711ec6b0ca5e1a32.png"/>
</div>
</body>
</html>
float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。float的作用：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。
float语法 ：
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
Float浮动用于设置对象靠左与靠右浮动样式，可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。
简单使用语法
div{float:left} /* css注释：设置div对象浮动靠左（left） */
div{float:right} /* css注释：设置div对象浮动靠右(right) */
浮动和清除浮动一般用在DIV+CSS布局时,通常情况下使用DIV+CSS布局,文档中的对象都是从上自下依次排列,比如你写<div id="a"></div><div id="b"></div>那么默认情况下id为b 的div 排在 a的下方,我们称这种布局为标准流,设置浮动后对象就脱离了标准流,就像水面上的漂浮物一样,不再严格的按照标准流排列。浮动的取值如下: left:对象浮在左边 right:对象浮在右边 clear 清楚左,,右 浮动。。。 例如下面的代码: <div id="container" ><div id="left"></div><div id="bottom></div></div>此时left right bottom 3个div 是从上到下排列,如果我们给left 添加一个浮动属性 float:left,那么3个div会从左到右排列,这是因为left 的浮动也会影响到后面的对象,如果我们给bottom 添加一句clear:both,那么bottom就不会再排在right的右边了,这是因为我们用clear:both清除了前面浮动对象对bottom的影响。如果您还有一些技术上的问题可以来后盾人看看有许多一流的技术人员可以帮助您解答您的问题
