前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >清除浮动

清除浮动

作者头像
阿年、嗯啊
发布2022-05-10 14:55:19
2.7K0
发布2022-05-10 14:55:19
举报
文章被收录于专栏:阿年的数据梦

清除浮动

为什么要清除浮动
  • 当父盒子没有设置高度(为了后期维护和扩展,不方便设置高度),而父盒子里面的子盒子浮动了,此时,影响了下面的布局,我们就应该清除浮动。
  • 清除浮动是为了清除浮动元素脱离标准流后对后续标准流造成的影响。
清除浮动的策略
  • 闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
清除浮动的方法
  1. 额外标签法。
  2. 父级元素添加overflow属性。
  3. :after伪元素法。
  4. 双伪元素清除浮动(推荐使用)。

一.  额外标签法

  • 额外标签法也称为隔墙法,是W3C推荐的做法。
  • 在浮动的元素后面加上一个空的块级元素,(注意,不能是行内元素)然后设置属性。
代码语言:javascript
复制
 <div style="clear: both"></div>
  • 注意:其中clear属性的取值有三个,分别是:left 、right、both。含义如下:

属性值

含义

left

不允许左侧有浮动元素(清除左侧浮动的影响)

right

不允许右侧有浮动元素(清除右侧浮动的影响)

both

同时清除左右两侧浮动的影响

  • 优点:通俗易懂,书写方便。
  • 缺点:添加许多无意义的标签,结构化较差。

二.  父级添加overflow属性

  • 可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll 。
代码语言:javascript
复制
   overflow: hidden;
  • 注意:要给浮动元素的父级盒子添加overflow属性。

三.  :after伪元素法

  • :after方式是额外标签法的升级版,也是给浮动盒子元素后面加一个块级元素,只不过是用CSS伪类实现的。也是给父元素添加属性。
代码语言:javascript
复制
  .clearfix:after {
      content : "";
      display: block;
      height: 0;
      clear : both;
      visibility: hidden;
  }
  .clearfix {
       /*IE6、7专有*/
      *zoom: 1;
  }
  • 写好如上的CSS样式后,直接给浮动元素的父元素添加**class=“clearfix”**类就可以了,注意,这里的类名不一定是clearfix,只不过是界内约定俗成的规范,遵守就可以了。
  • 优点:没有增加标签,结构更简单。
  • 缺点:需要照顾低版本的浏览器。

四.  双伪元素清除浮动(推荐使用)

  • 双伪元素清除浮动也是给浮动盒子元素加块级元素,只不过它在浮动元素前后各加了一个块级元素。也是给给父元素添加属性。
代码语言:javascript
复制
  .clearfix:before,
  .clearfix:after {
      content: "";
      display: table;
  }

  .clearfix:after {
      clear: both;
  }

  .clearfix {
      *zoom: 1;
  }
  • 写好如上CSS样式后直接给浮动元素的父元素添加**class=“clearfix”**类就可以了,和:after伪元素法做法相同。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-02-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 清除浮动
    • 一.  额外标签法
      • 二.  父级添加overflow属性
        • 三.  :after伪元素法
          • 四.  双伪元素清除浮动(推荐使用)
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档