为什么要让img浮动:

为什么要浮动: 

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

代码:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌依依

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值