快速学习CSS的浮动(float)属性

最新推荐文章于 2025-07-30 10:39:24 发布

Gamer_君莫愁

最新推荐文章于 2025-07-30 10:39:24 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML前端文章标签：前端 html html5 css

本文链接：https://blog.csdn.net/qq_47009853/article/details/134065435

HTML前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML中的浮动属性，如何使元素横向排列，以及浮动属性的应用规则，包括单行或多行浮动、尺寸影响和CSS顺序对布局的影响。特别强调了浮动的优先级和避免布局问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、如何理解浮动？

在HTML中，所谓“浮动”，就是让代码中的指定标签元素“浮动”到其它元素的上方。

例如下方这个图，我们可以想象有红、绿、蓝这三个元素，那么绿色这个元素就是浮动到了其它元素的上方，然后红色和蓝色就将绿色底部的空位给补上去了。

因此，拥有浮动属性的元素不占位

二、浮动属性的应用

浮动属性最主要的应用就是：让控件能够横向排列

浮动支持的值有：left（左浮动）、right（右浮动）

下面来看这样一段代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动示例</title>

    <!--色块相关的样式-->
    <style>
        .block{
            width: 100px;
            height: 100px;
        }

        .block1{
            background-color: red;
        }

        .block2{
            background-color: green;
        }

        .block3{
            background-color: blue;
        }
    </style>
    <!--色块相关的样式 end-->
</head>
<body>
    <!--三个色块-->
    <div class="block block1"></div>
    <div class="block block2"></div>
    <div class="block block3"></div>
    <!--三个色块 end-->
</body>
</html>

在这段代码中，我没有给任何元素添加浮动属性，因此，它的效果是这样的：

接下来我给它们添加浮动属性：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动示例</title>

    <!--色块相关的样式-->
    <style>
        .block{
            width: 100px;
            height: 100px;
            float: left;
        }

        .block1{
            background-color: red;
        }

        .block2{
            background-color: green;
        }

        .block3{
            background-color: blue;
        }
    </style>
    <!--色块相关的样式 end-->
</head>
<body>
    <!--三个色块-->
    <div class="block block1"></div>
    <div class="block block2"></div>
    <div class="block block3"></div>
    <!--三个色块 end-->
</body>
</html>

效果就变成了这样：