常用的清除浮动

最新推荐文章于 2024-07-15 15:35:16 发布

mufengs16

最新推荐文章于 2024-07-15 15:35:16 发布

阅读量161

点赞数

分类专栏： CSS2.0 文章标签： html css

本文链接：https://blog.csdn.net/qq_44087363/article/details/109584747

版权

CSS2.0 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

清除浮动

<!DOCTYPE html>
<html>
  <head>
    <title>清除浮动</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <style type="text/css">
      * {
        margin:0;
        padding:0;
      }
    .clearfix {
      *zoom:1;    /* 此处是为了兼容IE6浏览器所写的样式。由于在IE6浏览器中开发人员为了提升性能，
                  对于布局的元素是有所规定的，默认情况下诸如body,html,imput等元素是拥有布局的，对于
                  div是没有开启布局的，所以要添加zoom该样式来触发IE6的haslayout使其拥有布局 */
    }
    .clearfix:after {
      content:"";
      display:table;
      clear:both;
    }
    .box {
      border:2px solid;
     /* overflow:hidden; 这样做能清除浮动的原理是开启了元素的BFC,形成独立的BFC区域，不再受浮动元素的
     影响*/
    }
      .box1 {
        float:left;
        width:100px;
        height:100px;
        background-color:mediumpurple;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="box1"> 
        <p>清除浮动</p>  
      </div>
    </div>
  </body>
</html>

*zoom:1 是为了兼容IE6浏览器所写的样式。由于在IE6浏览器中开发人员为了提升性能，对于布局的元素是有所规定的，默认情况下诸如body,html,imput等元素是拥有布局的，对于div是没有开启布局的，所以要添加zoom该样式来触发IE6的haslayout使其拥有布局

mufengs16

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
常用的清除浮动

清除浮动<!DOCTYPE html><html> <head> <title>清除浮动</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <style type="text/css"> * {
复制链接

扫一扫