CSS中的clear清除属性

最新推荐文章于 2024-04-22 17:56:51 发布

小大的小

最新推荐文章于 2024-04-22 17:56:51 发布

阅读量2.8k

点赞数 2

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

本文链接：https://blog.csdn.net/m0_45887053/article/details/125516709

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

clear属性指定一个元素是否要移动到它之前的浮动元素的下面，clear属性适用于浮动元素和非浮动元素

clear：left 元素被向下移动以清除左浮动。

clear:right 元素被向下移动以清除右浮动。

clear:both 元素被向下移动以清除左右浮动。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
            width: 100px;
            height: 100px;
            float: left;
            margin: 30px;
        }

        .black {
            background-color: rgb(47, 46, 46);
            width: 100px;
            height: 150px;
            float: left;
            clear: left;
            margin: 20px;
        }

        p {
            border: 1px solid black;
            overflow: hidden;
            clear: left;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="pink">

    </div>
    <div class="black"></div>
    <p>hhhhhhhhhhhhhhhhhhhhhhhh</p>
</body>

</html>

p与black不设置clear属性时如下图

black 浮动元素设置clear：left 黑色盒子会移动到它的左侧盒子下面也就是清除它的左侧浮动元素

black的左侧有浮动元素，那么就强制black另起一行。

当p标签和black设置clear属性clear：left 清除它左侧浮动元素另起一行

当clear属性应用于非浮动元素时，它的垂直外边距会被折叠

当clear属性应用于浮动元素时，它的垂直外边距不会被折叠

小大的小

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS中的clear清除属性

clear属性指定一个元素是否要移动到它之前的浮动元素的下面，clear属性适用于浮动元素和非浮动元素clear：left 元素被向下移动以清除左浮动。clear:right 元素被向下移动以清除右浮动。元素被向下移动以清除左右浮动。p与black不设置clear属性时如下图black 浮动元素设置clear：left 黑色盒子会移动到它的左侧盒子下面也就是清除它的左侧浮动元素black的左侧有浮动元素，那么就强制black另起一行。当p标签和black设置clear属性clear：l
复制链接

扫一扫