html float 浮动

最新推荐文章于 2022-07-01 09:53:31 发布

Mr_gxj

最新推荐文章于 2022-07-01 09:53:31 发布

阅读量988

点赞数

分类专栏： HTML

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

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<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结束一定要清除

Mr_gxj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html float 浮动

head> meta charset="UTF-8"> title>浮动title> style> .d1{ background-color: #c0ff29; width: 200px; height: 200px; float: left;
复制链接

扫一扫