css_清除浮动

最新推荐文章于 2024-08-28 16:19:38 发布

白小纯不单纯

最新推荐文章于 2024-08-28 16:19:38 发布

阅读量200

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/u010713935/article/details/88720346

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里只是说开发使用的清除浮动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

  <style type="text/css">

   .one1{
     height: 70px;
     width: 60px;
     background: greenyellow;
     float:left;

   }
   .one2{
     height: 90px;
     width: 100px;
     background: yellow;
     float: left;
   }
   .one3{
     height: 120px;
     width: 150px;
     background: #b3d4fc;
     /*float:left;*/
   }
  .box{
  width: 200px;
  /*height: 200px;*/
  background: #888888;
  /*float: left;*/
    /*overflow: hidden;*/
}

   .clearfix:after{
     content: "020";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   }

  </style>
    <title>Title</title>
</head>
<body>
//此处box的float 不要设置如果是下面有一个盒子。如果设置了就清除不了浮动了
<div class="clearfix box">  
  <div class="one1"> 1</div>
  <div class="one2"> 2</div>
</div>

<div class="one3">3 </div>
</body>
</html>