html float 浮动

最新推荐文章于 2024-09-11 08:17:43 发布

Mr_gxj

最新推荐文章于 2024-09-11 08:17:43 发布

阅读量1k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Mr_gxj/article/details/53044360

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文通过实例详细介绍了CSS中div元素使用浮动(float)属性后的布局效果，并解释了如何使用clear属性来清除浮动带来的影响。同时展示了相对定位(position)和绝对定位在实际网页布局中的应用。

摘要由CSDN通过智能技术生成

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .d1{
            background-color: #c0ff29;
            width: 200px;
            height: 200px;
            float: left;
        }
        .d2{
            background-color: #ff464a;
            width: 200px;
            height: 200px;
            float: left;
        }
        .d3{
            background-color: #f0fff6;
            width: 200px;
            height: 200px;
            float: left;
        }
        .d4{
            background-color:black;
            width: 200px;
            height: 200px;
            clear: left;
            float: left;
            /*clear: right;清除右浮动*/
            /*clear: both;清除左右浮动*/
            /*清除浮动*/
        }
        .d5{
            background-color:yellow;
            width: 200px;
            height: 200px;
            float: left;
            /*相对定位*/
            position: relative;
            top: 20px;
            left: 20px;
        }
        .d6{
            background-color: #c215ff;
            width: 200px;
            height: 200px;
            clear: left;
            /*position: relative;*/
        }
        .d7{
            background-color: #ffdcdf;
            width: 20px;
            height: 20px;
            float: left;
            /*绝对定位*/
            position: absolute;
            top: 20px;

        }
    </style>
</head>
<body>
<!--class 定义style的名字-->
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6">
    <div class="d7"></div>
</div>

</body>

.d6 不注释掉的话，div7,会在div6的边框里面，float结束一定要清除