CSS17：浮动float

最新推荐文章于 2022-12-02 22:27:58 发布

一个优雅的搬砖人

最新推荐文章于 2022-12-02 22:27:58 发布

阅读量319

点赞数

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

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123113986

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

浮动 float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是哪种元素。

注意：如果只有极少的空间可供浮动元素，那么这个元素会跳至下一行，直到某一行拥有足够的空间为止。

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

清除浮动 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

示例代码

1、首先将几张图片放在 div 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            border: 2px dashed slateblue;
        }
    </style>
</head>
<body>
<div>
    <img src="image/img.png" alt="img" id="img">
    <img src="image/img_1.png" alt="img1" id="img1">
    <img src="image/img_2.png" alt="img2" id="img2">
    有信念不一定会成功，没信念一定会失败。
</div>
</body>
</html>

此时图片是在 div 中的

2、给 img 元素添加 float: left; （靠左浮动）的样式后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            border: 2px dashed slateblue;
        }
        img {
            float: left;
        }
    </style>
</head>
<body>
<div>
    <img src="image/img.png" alt="img" id="img">
    <img src="image/img_1.png" alt="img1" id="img1">
    <img src="image/img_2.png" alt="img2" id="img2">
    有信念不一定会成功，没信念一定会失败。
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            border: 2px dashed slateblue;
        }
        img {
            float: left;
        }
    </style>
</head>
<body>
<div>
    <img src="image/img.png" alt="img" id="img">
    <img src="image/img_1.png" alt="img1" id="img1">
    <img src="image/img_2.png" alt="img2" id="img2">
    有信念不一定会成功，没信念一定会失败。
</div>

可以看到图片是悬浮在 div 上面的，其实现在已经“分层”了，底层是 div ，上面是图片

3、给 img2 添加 clear: both; （指定两侧不能出现浮动元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            border: 2px dashed slateblue;
        }
        img {
            float: left;
        }
        #img2 {
            clear: both;
        }
    </style>
</head>
<body>
<div>
    <img src="image/img.png" alt="img" id="img">
    <img src="image/img_1.png" alt="img1" id="img1">
    <img src="image/img_2.png" alt="img2" id="img2">
    有信念不一定会成功，没信念一定会失败。
</div>
</body>
</html>

可以看到 img2 两侧不再有浮动元素

一个优雅的搬砖人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS17：浮动float

浮动 floatfloat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是哪种元素。注意：如果只有极少的空间可供浮动元素，那么这个元素会跳至下一行，直到某一行拥有足够的空间为止。可能的值值描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其文本中出现的位置。 inherit 规定应该从父
复制链接

扫一扫

专栏目录