浮动与定位

王欢欢~(¯▽¯~)

于 2024-05-13 21:53:27 发布

阅读量371

点赞数 5

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_79895666/article/details/138821423

版权

<html>
   <head>
       <meta charset="utf-8" />
       <title>浮动</title>
       <style>
           *{ /* 初始化所有标签 */
               margin: 0;
               padding: 0;
           }
           .box{
               width: 330px;
               height: 330px;
               border: 1px solid blue;
               font-size: 36px;
               text-align: center;
               float: left;
           }
           .box2{
               width: 300px;
               height: 300px;
               background-color: aqua;
           }
           .clear{
               clear: both;
           /* }
           .fu{
               overflow: hidden; */
           }
           /* 3.添加after伪元素 */
           .clearfix:;after { /* 在什么之后 */
               content: ""; /* 内容为空 */
               display: block; /* 转为块元素 */
               height: 0; /* 清除两端浮动 */
               clear: both;
               visibility: hidden;
           }
       </style>
   </head>
   <body>
       
       
       
       <div class="clearfix">
       <div class="box">1</div>
       <div class="box" >2</div>
       <div class="box" >3</div>
       

       </div>
       <div class="box2"></div>
   </body>
</html>