CSS中浮动的特点

最新推荐文章于 2022-11-26 11:43:22 发布

安静的对折

最新推荐文章于 2022-11-26 11:43:22 发布

阅读量5.5k

点赞数 1

分类专栏： CSS 文章标签： html css 前端浮动 float

本文链接：https://blog.csdn.net/k491022087/article/details/52389271

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

我们在给标签设置浮动后，会有一下几个特点

1 浮动会脱离标准流

如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断

2 浮动的元素会影响下面的元素，不会影响上面的元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 100px;
            height: 100px;
            background: red;
        }
        .two {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .three {
            width: 150px;
            height: 150px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

3 浮动会影响元素的显示方式

不管元素是行内元素还是块级元素，设置浮动后，将来显示的时候会在同一行内显示，除非一行放不下了，才会在第二行依次显示

浮动后的元素是可以设置宽高

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
<!--我们知道行内元素设置宽高是不起作用的，但是给行内元素设置浮动后，宽高就可以设置了-->
<span class="one"></span>
<span class="two"></span>
</body>
</html>

安静的对折

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS中浮动的特点

我们在给标签设置浮动后，会有一下几个特点1浮动会脱离标准流如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断2浮动的元素会影响下面的元素，不会影响上面的元素 * {
复制链接

扫一扫