为什么要让img浮动：

news2024/11/15 11:18:52

为什么要浮动：

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

代码：

<img src="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
        }
}
<body>
  <img src="https://static.maizuo.com/pc/v5/usr/movie/1f25dd6943762288dfd84b961c98f478.jpg" />
  <div>
       <div>红发歌姬</div>
  </div>
</body>

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/57002.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！