html float 浮动

来源：互联网发布：mac dock图标大小编辑：程序博客网时间：2024/06/05 12:07
<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结束一定要清除
0 0