什么是clearfix (一文搞清楚css清除浮动clearfix)


Posted in HTML / CSS onMay 21, 2023

 什么是 clearfix ?

clearfix 是一种 CSS 技巧,可以在不添加新的 html 标签的前提下,解决让父元素包含浮动的子元素的问题。这个技巧的版本是很多的,最流行的一个是 Micro Clearfix Hack 。这个也是 Bootstrap 采用的方案(可以 google 一下 “bootstrap clearfix” 来查看详情)。

Micro Clearfix Hack 的作者给出的原始方案,内容如下:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

但是我的习惯是支持到 IE9+ ,同时习惯了用 “ clearfix ” 作为 class 名,所有稍微修改后的版本如下:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

百度用的代码

.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}

三水点靠木用的

.clear{clear: both;overflow: hidden;line-height: 0;height: 0;zoom:1}
.clear:after {display: block; height: 0px; visibility: hidden; clear: both; content: ""}
.clearfix{ *zoom:1;}
.clearfix:before,	
.clearfix:after {content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;}
.clearfix:after{clear: both}

用了这个方法很长时间之后,都觉得上面的代码就是天书,尤其是对 display: table 这一行不理解。其实,这些代码为的是解决两个实际中经常遇到,而且非常让人恼火的问题。问题搞清楚了,代码也就明白了。

自清除子元素浮动

  • 先说第一个问题和解决方案。

  • div 布局的一个非常让新手头疼的问题就是,如果一个父元素中包含若干个子元素,那么当给所有的子元素都设置了浮动( e.g float: left ),那么父元素的高度就会为0。

比如有这样的 html 代码:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

如果子元素没有浮动,那么显示是这样的:

什么是clearfix (一文搞清楚css清除浮动clearfix)

但是一旦所有子元素都浮动了,那么父元素的高度变为0,就成了这样的恶心效果:

什么是clearfix (一文搞清楚css清除浮动clearfix)

解决方法如下:

html 中添加 clearfix

<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

如果只是解决这个问题,那么下面的代码就够了。

.clearfix:after {
   content: " ";
   display: block;
   clear: both;
}

但是注意,文章开始的代码中使用 display: table 而不是这里的 display: block ,可以同样解决这个问题。但是,下面这个问题中使用 display: table 就是必须的了。

Margin Collapse 外边距重叠问题

再来说第二个问题。

外边距重叠也是一个很让人讨厌的问题。来描述一下症状。

container 之中包含一个 item 子元素,代码如下

<div class="container">
  <div class="item">
    item
  </div>
</div>

比如默认显示成这样:

什么是clearfix (一文搞清楚css清除浮动clearfix)

这时,我给 item 加了 margin-top: 30px ,本来这时候我期待的结果是,item 块本身应该距离 container 青色区域的上边界 30px 。同时一个副作用是青色区域应该拉高 30px 。但是实际上得到的却是下面的效果:

什么是clearfix (一文搞清楚css清除浮动clearfix)

造成这个的原因是,父子元素的 margin-top 是会重叠的,即使是像上面的情况中,父元素 container 自身 margin-top 为 0 的情况下也一样。这样造成的一个现象就是父元素“包不住”子元素的 margin-top ,溢出了。类似的问题也会发生在 margin-bottom 身上。

要解决这个问题,就要给 container 添加 clearfix ,html 代码如下

<div class="container clearfix">
  <div class="item">
    item
  </div>
</div>

如果只是针对这一种问题,最简单的 clearfix 实现是这样:

.clearfix:before,
.clearfix:after
{
 content: "   ";
 display: table;
}

注意,display: table 换成 dispaly: block 是不行的。

效果图

什么是clearfix (一文搞清楚css清除浮动clearfix)

完整测试代码脚本的家专门提供

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
<style>
.header{margin:0 auto;width:660px;color:white;font-size:18px;text-align:center;background-color:#fa1698;width:660px;height:70px;line-height:70px}
.container{margin:0 auto;width:660px;color:white;font-size:18px;text-align:center;background-color:#1a8081;}
.item{background-color:#fa653e;width:70px;height:70px;line-height:70px;margin-top: 30px}
.clearfix:before,
.clearfix:after
{
 content: " ";
 display: table;
}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
    </style>
</head>
<body style="text-align:center;">
<div class="header">
header
</div>
<div class="container clearfix">
  <div class="item">
    item
  </div>
</div>
</body>
</html>

当然,外边距重叠不局限于上面的父子元素之间,也会发生在兄弟元素之间,甚至是一个高度为 0 的元素,自己的上下边距也会重叠,这个就是 MDN Margin Collapse 文档上给出的全部三种情况,但是后两种在实际开发中不会带来很大麻烦,也不是咱们的 clearfix 方法所关心的。

结语

上面两个问题的解决代码合并到一起,就是文章最初 Peter 给出的 clearfix 代码了。 有了这个方法,当给子元素添加浮动或者是 margin 的时候,父元素的行为就非常符合正常的预期了,开发页面布局变得非常简单,所以 clearfix 方法对于按照 div 的 block 模型排版是非常有用的。

下面分享一段当前比较常用的代码

.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}

但是,顺便提一下,未来 flexbox 会大行其道,flexbox 模型的特点是,不用 float ,并且子元素的 margin 也不会和父元素重叠。

到此这篇关于什么是clearfix (一文搞清楚css清除浮动clearfix)的文章就介绍到这了,更多相关什么是clearfix内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 #HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 #HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 #HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 #HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 #HTML / CSS
HTML中link标签属性的具体用法
May 07 #HTML / CSS
css弧边选项卡的项目实践
May 07 #HTML / CSS
You might like
收音机的保养
2021/03/01 无线电
php开发文档 会员收费1期
2012/08/14 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python字符串格式化
2015/06/15 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python3 中文文件读写方法
2018/01/23 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Python如何发送与接收大型数组
2020/08/07 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
同学会主持词
2014/03/18 职场文书
《四季》教学反思
2014/04/08 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python