HTML+CSS(浮动与清除浮动)

最新推荐文章于 2024-09-29 23:41:25 发布

兔子爱吃柠檬草

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量202

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/L___XH/article/details/123162564

版权

HTML:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" href="css/lian.css">
       <link rel="stylesheet" href="css/public.css">
   </head>
   <body>
       
       <main class="pageMain">
           <div class="chengse">橙色</div>
           <div class="qingse">青色</div>
       </main>
       
   </body>
</html>

CSS:

.pageMain{
   width: 600px;
   height: 400px;
   border: 10px #000 solid;
   margin-left: auto;
   margin-right: auto;
}
.chengse{
   background: #f60;
   width: 400px;
   height: 300px;
}
.qingse{
   background: #0ff;
   width: 200px;
   height: 100px;
}

未浮动的效果图：

加入浮动之后：

CSS:

.chengse{
   background: #f60;
   width: 400px;
   height: 300px;
   float: left;
}
.qingse{
   background: #0ff;
   width: 200px;
   height: 100px;
   float: right;
}

效果图：

加入清除浮动之后：

HTML：

CSS:

.clear{
clear: both;
}

效果图：

但如若单独清除浮动：

CSS：

.chengse{
   background: #f60;
   width: 400px;
   height: 300px;
   float: left;
   clear: right;
}
.qingse{
   background: #0ff;
   width: 200px;
   height: 100px;
   float: right;
   clear: left;
}

效果图：

若只浮动一个：

CSS：

.chengse{
   background: #f60;
   width: 400px;
   height: 300px;
   float: left;
   clear:right;
}
.qingse{
   background: #0ff;
   width: 200px;
   height: 100px;
}

效果图：