清除浮动

最新推荐文章于 2024-10-08 10:16:40 发布

老街一角

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量179

点赞数

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

本文链接：https://blog.csdn.net/Wen_Tao98/article/details/112791525

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css中清除浮动的几种方式

一、为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的为题

1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子

在这里插入图片描述

2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了

在这里插入图片描述

小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要解决浮动

二、清除浮动的四种方式

额外标签法（给最后一个浮动的标签后，新加一个标签，给其设置clear:both;,）（但这种方式是不推荐使用的，因为添加无意义的标签，语义化差）

  <style>
    .container{
      background: #ff0000;
      border: 2px solid #000000;
    }
    .box{
      width: 200px;
      height: 200px;
      background: orange;
      float: left;
    }
    .box2{
      width: 100px;
      height: 100px;
      background: green;
      float: left;
    }
    .footer{
      height: 100px;
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">big</div>
    <div class="box2">small</div>
    <div style="clear:both"></div>
  </div>
  <div class="footer">footer</div>
</body>

父元素添加overfiow属性（过触发BFC的方式，实现清除浮动）

.container{
      background: #ff0000;
      border: 2px solid #000000;
      overflow: hidden;
    }

使用after伪元素清除浮动

.container:after{ /*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";  
      display: flex;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .container{
      *zoom: 1; /* IE6清除浮动的方式，*号只有IE6和IE7执行，其他浏览器不行 */
    }

优点：符合闭合浮动思想，结构语义化正确,不容易出现其他为题
缺点：IE6-7不支持伪元素：after，使用zoom:1触发

使用before和after双伪元素清除浮动

 .container:after,.container:before{ 
  content: "";  
  display: table;
}
.container:after{
  clear: both;
}
.container{
  *zoom: 1; 
}

在这里插入图片描述

除了这四种还有一种更为简单的方式，给父元素定义好height高度，就解决了父级元素无法获取到高度的问题。

老街一角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录