为什么要让img浮动：

陌一一

已于 2023-01-03 16:46:50 修改

阅读量1.1k

点赞数 1

分类专栏： web前端开发文章标签：前端 html javascript

于 2022-12-02 22:27:58 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/128155021

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

为什么要浮动：

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

代码：

<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>

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浮动和定位有什么区别

陌一一

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
为什么要让img浮动：

img的浮动配合overflow：hidden使用
复制链接

扫一扫

专栏目录