如何清除浮动

最新推荐文章于 2024-07-19 08:58:30 发布

始料未及长安

最新推荐文章于 2024-07-19 08:58:30 发布

阅读量87

点赞数 1

本文链接：https://blog.csdn.net/weixin_50919504/article/details/113939369

版权

如何清除浮动

清除浮动——：after 伪元素法
：after 方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {
content:"";
dispkay:blook;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {/*IE6，7专有*/
*zoom:1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度，淘宝网，网易等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
  .cearfix:before,
  .cearfix:after {
 content: "";
 display: table;
}
.cearfix:after {
  clear: both;
}
 .cearfix {
     *zoom:1;
 }
 .box {
     width: 600px;
     border: 1px solid red;
     margin: 0 auto;
 }
 
  .damao {
      float: left;
      width: 600px;
      height: 300px;
      background-color: slateblue;
  }
  .ermao {
      float: left;
      width: 300px;
      height: 200px;
      background-color: tomato;
  }
  .footer {
      height: 150px;
      background-color: yellowgreen;
  }
    </style>
</head>
<body>
    <div class="box clearfix"> 
   <div class="demao">地狱</div>
<div class="ermao">天堂</div>

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