CSS|浮动float

最新推荐文章于 2023-04-03 22:59:32 发布

Alan_Lowe

最新推荐文章于 2023-04-03 22:59:32 发布

阅读量83

点赞数 2

分类专栏： # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45985728/article/details/119549143

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|浮动float

1.文本环绕图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
  <style>
    div{
      width: 600px;
      border: 10px solid blue;
      background-image: linear-gradient(40deg,yellowgreen,yellow,green);
    }
  </style>
</head>
<body>

<div>
  <img src="../resource/image/img.png" alt="科比图片">
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

</body>
</html>

这样子我们将一张图片和一段文字放在一起，样子会很丑，效果如下：

在这里插入图片描述

设置图片浮动：

img{
      float: left;
}

效果如下：

在这里插入图片描述

2.相邻浮动元素

加入我们在图片当中放置两张图片并且在它们之间加上几个空格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
  <style>
    div{
      width: 600px;
      border: 10px solid blue;
      background-image: linear-gradient(40deg,yellowgreen,yellow,green);
    }
  </style>
</head>
<body>

<div>
  <img src="../resource/image/img.png" alt="科比图片">
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <img src="../resource/image/img.png" alt="科比图片">
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

</body>
</html>

效果：

在这里插入图片描述

我们可以看到在图片之间是有空格的，我们机上img之后，图片就会浮动，会向左紧靠

img{
	/*left为左浮动，right为右浮动，none为不浮动*/
	float: left;
}

效果：

在这里插入图片描述

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录