为什么要让img浮动：

为什么要浮动： 

图片不浮动的话，图片和文字是像下面这样排版的：

代码：

"https://static.maizuo.com/pc/v5/usr/movie/1f25dd6943762288dfd84b961c98f478.jpg" />
<div>
    <div>红发歌姬div>
div>

但是网站上的图片和文字是这样排的：

所以要让img浮动起来，，，浮动起来就能实现，原因看下面：

---

如何浮动及浮动的原理：

浮动代码：

float:left

浮动的原理：

代码演示：浮动

 结果：

结果显示，第一个盒子浮动起来了，第二个盒子上去了，但是第二个盒子身上的内容环绕第一个盒子显示。

---

让img浮动的详细原因：

所以我们就能解释为什么要给img图片加  float：left  的属性了：

看下面的代码，让img浮动起来，它下面的div盒子就上去了，文字也上去了，但是文字不会被img盒子给覆盖，而且能跟img排在一行上；

style{
    img{
        float:left
        }
}
  <img src="https://static.maizuo.com/pc/v5/usr/movie/1f25dd6943762288dfd84b961c98f478.jpg" />
  <div>
       <div>红发歌姬div>
  div>

img：float：left浮动经常要配合overflow：hidden（清除浮动）来使用：（重要）

li{
    overflow: hidden;
}
li img{
    float: left;
}

详情请看： 

overflow:hidden的作用_陌一一的博客-CSDN博客

想了解 float:left属性 的看：css第十一课：浮动属性_陌一一的博客-CSDN博客 

想知道 float:left  和 position：absolute区别的看：css定位及定位和浮动的区别_陌一一的博客-CSDN博客_css浮动和定位有什么区别