下面div总宽1000px，里面两个左右浮动的p，宽度分别为500px，div刚好能容下他们，你试试把任意一个p宽度改为501px，多1px，马上挤下去变两行。
<div style="width:1000px">
<p style="width:500pxfloat:left">Left txt</p>
<p style="width:500pxfloat:right">Right txt</p>
</div>
两个css都代表变量，=在计算机语言里不是等于的意思，是赋值。也就是说之前有一个css，具体什么值不管，现在在这个css基础上加一个字符串，background什么的，然后一并赋值给一个新的变量，名字也叫css。实际上的意思就是说给css加一个字符串。可以简写成css+="background...什么的。
<style type="text/css">.left-img{float:leftposition:fixedtop:20pxleft:10px}
</style>
<img class="left-img" src="img.png" width="180" height="180" alt=""/>
注解：
<style type="text/css">....</style>/ 页内定义（CSS样式标签）
.left-img / 定义样式名称
{....} /定义样式
float:left //左浮动（float: right右浮动）
position:fixed//固定元素不随滚动条滚动 （position: absolute绝对定位，随滚动）
top:20px //距离页面顶部距离
left:10px//距离页面左侧距离
<img class="left-img" /指定给图像Img标签css样式.left-img
以上可以实现你需要的效果，但还是建议你系统化的学习下
百度关键词css 第一个站点w3school比较全面，前端架构师必读～
