CSS之浮动（float)的概念

最新推荐文章于 2024-06-02 10:00:00 发布

银辟法斯特

最新推荐文章于 2024-06-02 10:00:00 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签：前端浮动 web css

本文链接：https://blog.csdn.net/Slartibartfast/article/details/80874386

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要弄懂浮动首先要了解标准流的概念

标准流（normal flow)是指在html中标签元素按照默认方式排列下的布局

默认方式下块级元素单独占一行，而文字和行内块元素则从左往右依次排列。

举个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            background-color: deeppink;
            width: 100px;
            height: 100px;
        }
        .b {
            background-color: aliceblue  ;
            width: 100px;
            height: 100px;
        }
        .c {
            background-color: greenyellow;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

</body>
</html>

在浏览器下的显示效果：

我们定义三个div盒子，给定了宽度，然而同级的盒子之间仍然另起一行显示

可见，标准流情况下div标签下的元素哪怕给定了宽度，同级的另一个div标签依然会另起一行显示。

然而在实际运用中，很多时候需要我们把多个盒子放到一列中显示，这时候就需要用到浮动了

什么是浮动？

浮动就是取消标准流的格式，让块级元素可以在同一行中显示。

在css中浮动的写法：

选择器{float: 属性值;}

float有四个属性值：

left	向左浮动
right	向右浮动
none	不浮动（标准流）
inherit	继承父级元素的浮动属性

浮动与标准流的关系

1.浮动与标准流下的块级元素。

给上面的例子加入浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a {
            background-color: deeppink;
            width: 100px;
            height: 100px;
            float: left;
        }
        .b {
            background-color: aliceblue;
            width: 100px;
            height: 100px;
            float: right;
        }
        .c {
            background-color: greenyellow;
            width: 100px;
            height: 100px;
            float: none;
        }
    </style>
</head>
<body>
<div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

</body>
</html>  float: left;
        }
        .b {
            background-color: aliceblue;
            width: 100px;
            height: 100px;
            float: right;
        }
        .c {
            background-color: greenyellow;
            width: 100px;
            height: 100px;
            float: none;
        }
    </style>
</head>
<body>
<div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

</body>
</html>

结果是这样的：

我们发现，我们给了标签为c的块级元素float: none的属性，相当于c是标准流的格式，但是a却把c盖住了

调整c盒子的宽高可以看得更加直观：

这是因为浮动属性下的元素是不占标准流的块级元素的位置的，所以标准流的块级元素仍然会按默认的方式从左上开始排列。当浮动的块级元素和标准流的块级元素的位置发生重叠时，浮动元素就会盖住标准流的块级元素。

2.浮动与标准流的行内元素。

在c的属性中加入

display: inline-block;

使其成为行内块元素

结果是这样的：

给了标准流下的c盒子一个行内块属性的时候，浮动的盒子并没有盖住c盒子，而是把c盒子“挤”开了。

可以这样理解：浮动元素只会飘浮于垂直排列的块级元素上方，浮动的块级元素可以理解为是一个行内块，而标准流中的水平排列的行内元素则相当于同一层面，会被浮动元素挤出去，形成环绕的效果。

外链:https://slartbartfast.cn/articlePage.php?articleid=234

银辟法斯特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之浮动（float)的概念

要弄懂浮动首先要了解标准流的概念标准流（normal flow)是指在html中标签元素按照默认方式排列下的布局默认方式下块级元素单独占一行，而文字和行内块元素则从左往右依次排列。举个简单的例子： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫