前端开发入门之【CSS详解】：浮动float

细水长流者

已于 2025-04-07 14:56:51 修改

阅读量997

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css css3 前端

于 2025-03-10 14:48:30 首次发布

本文链接：https://blog.csdn.net/qiaoermeng/article/details/146154552

前端专栏收录该内容

20 篇文章

订阅专栏

在前端开发里，浮动（float）是个特别实用的工具，就好比是你布置房间时的一个魔法技巧，能让网页元素的摆放更灵活。下面我就详细给你讲讲。

浮动到底是啥

想象一下，你有一排积木整整齐齐地摆在地上，这些积木就像是网页里一个个普通的元素，它们会按照从上到下、从左到右的顺序依次排列。这时候，浮动就像是一股神奇的力量，能把其中一些积木“拎”起来，让它们脱离原本的排列顺序，跑到别的地方去。

在网页里，给元素设置float属性，就相当于对这个元素施展了“浮动魔法”，让它可以向左或者向右移动，并且脱离文档流。文档流简单来说，就是元素正常的排列规则。

浮动的取值

float: left：这就好比把元素“拎”起来，然后让它往左边靠。比如说，你有几个盒子元素，给其中一个设置了float: left，它就会像被磁铁吸住一样，快速地往左边移动，直到碰到容器的左边边缘或者其他已经浮动到左边的元素。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 5px;
        }

        .float-left {
            float: left;
        }
    </style>
</head>

<body>
    <div class="box float-left">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>
</body>

</html>

在这个例子中，“盒子1”就会浮动到左边，而“盒子2”和“盒子3”会按照正常的文档流排列，但“盒子2”会填补“盒子1”原来的位置。

float: right：和left相反，它会让元素往右边靠。元素会像被右边的磁铁吸引一样，快速地移动到容器的右边边缘或者其他已经浮动到右边的元素旁边。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: 5px;
        }

        .float-right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="box float-right">盒子1</div>
    <div class="box">盒子2</div>
    <div class="box">盒子3</div>
</body>

</html>

这里的“盒子1”就会浮动到右边，“盒子2”和“盒子3”会在剩下的空间里正常排列。

浮动带来的影响

高度塌陷：当一个父元素里面的子元素都设置了浮动后，父元素就好像失去了对它们的“掌控”，父元素的高度会变为0，这就是高度塌陷问题。就好比一个房间里的家具都飘起来了，房间的高度就好像消失了一样。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            border: 1px solid red;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

在这个例子中，父元素parent的高度就会塌陷，因为子元素child都浮动了。

清除浮动

为了解决高度塌陷问题，我们就需要清除浮动。清除浮动就像是给房间施了个魔法，让那些飘起来的家具重新回到地面，让房间恢复正常的高度。

可以使用clear属性来清除浮动，它有left、right、both三个值。

clear: left：表示元素的左边不能有浮动元素。
clear: right：表示元素的右边不能有浮动元素。
clear: both：表示元素的左右两边都不能有浮动元素。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            border: 1px solid red;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="parent clearfix">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>