php里清除浮动代码,CSS中使用clearfix清除浮动的方法
首先在很多很多年以前我们常用的清除浮动是这样的。
CSS Code复制内容到剪贴板
.clear{clear:both;line-height:0;}
现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用。
这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。
因此有很多大神就研究出了 clearfix 清除浮动的方法,直接解决了上面的缺陷,不需要增加空标签,直接在有浮动的外层加上这个样式就可以了,这也是我们今天要讨论的clearfix进化史。
起源
CSS Code复制内容到剪贴板
.clearfix:after {
visibility:hidden;
display:block;
font-size: 0;
content:" ";
clear:both;
height: 0;
}
.clearfix {display:inline-table; }
* html .clearfix {height: 1%; }//Hides from IE-mac
.clearfix {display:block; }//Endhidefrom IE-mac
解释一下以上的代码:
对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。利用 * 对 IE/Mac 隐藏一些规则:
height:1% 用来触发 IE6 下的haslayout。
重新对 IE/Mac 外的IE应用 block 显示属性。
最后一行用于结束针对 IE/Mac 的hack。(是不是觉得很坑爹,Mac下还有IE)
起源代码可能也是很早期的时候了,再往后Mac下的IE5也发展到IE6了,各种浏览器开始向W3C这条标准慢慢靠齐了。所以就有了下面这个写法出现了。
CSS Code复制内容到剪贴板
.clearfix:after {
visibility:hidden;
display:block;
font-size: 0;
content:" ";
clear:both;
height: 0;
}
* html .clearfix { zoom: 1; }/* IE6 */
*:first-child+html .clearfix { zoom: 1; }/* IE7 */
IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。
在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:
CSS Code复制内容到剪贴板
.clearfix:after {
visibility:hidden;
display:block;
font-size: 0;
content:" ";
clear:both;
height: 0;
}
.clearfix{*zoom:1;}
但是对于很多同学这种优化程度代码还是不够给力,clearfix 发展到现在的两个终极版。
重构clearfix浮动
构成Block Formatting Context的方法有下面几种:
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
但是display: inline-block会产生多余空白,所以也排除掉。
剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
这样我们新的.clearfix就会闭合内部元素的浮动。
后面又有人对此进行了改良:
终极版一:
CSS Code复制内容到剪贴板
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/
解释下:content:"\200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。
终极版二:
CSS Code复制内容到剪贴板
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;/*IE/7/6*/
}
这两个终极版代码都很简洁,终极版一和二都可以使用,以上代码都经过测试,大家赶紧用一下吧,如果有什么问题请及时跟我反馈,如果你还停留在clearfix的老代码的时候就赶紧更新一下代码吧。
php里清除浮动代码,CSS中使用clearfix清除浮动的方法相关推荐
- css .clearfix,谈谈CSS之关于clearfix清除浮动
原标题:谈谈CSS之关于clearfix清除浮动 在网上要是你随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...
- css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法 发布时间:2020-06-25 10:53:17 来源:亿速云 阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
- css如何载入多种字体,在css中包含多种字体的正确方法
我不是一个简单的时刻.哪种方式是在css中包含多种字体的正确方法?这里是简单的例子.在css中包含多种字体的正确方法 This? @font-face { font-family: Delicious ...
- 文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
- html怎么取消浮动,html css 中浮动的讲解和取消浮动的常见问题
添加浮动 单个浮动(只浮动了一个div元素div2) 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下di ...
- php中框是什么代码,css中box是什么文件
css中box是指CSS盒子模型,即Box Model:在CSS中,"box model"这一术语是用来设计和布局时使用:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包 ...
- css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法 发布时间:2020-08-31 13:54:27 来源:亿速云 阅读:65 作者:小新 这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
- css .clearfix,网页CSS中的.clearfix是什么意思
.clearfix是一种通用类,它的作用是 -- 清除之前的浮动关系,修复在firefox.chrome等标准浏览器中子元素全部浮动时,父元素不自动增高的问题. [cleafix的CSS定义] 看这一 ...
- CSS中通过import方式导入的方法
在高性能网站设计的第五章,我简要的提到@import 对于网站的性能有某些负面的影响,然后我在 Web 2.0 Expo 的演讲上深入探讨了这个问题,并创建了一些测试页面和HTTP瀑布状图表,这些在下 ...
最新文章
- oracle 行级死锁_ORACLE死锁的分类
- leetcode 688. Knight Probability in Chessboard | 688. “马”在棋盘上的概率(dp,记忆化搜索)
- C语言 数据结构 栈的数组实现 realloc函数
- 关键词热度分析工具_谷歌SEO推广排名的关键要素(一)利用谷歌关键词分析工具分析关键词...
- 兼容FF/IE的添加收藏夹的代码
- 基本运算符中Swift和Java的比较
- POJ 2082Lost Cows
- 快速导入Maven依赖的方法
- CocosCreator-动态生成3种敌人
- Request模块实战04 ---- 爬取豆瓣电影排行榜
- clickhouse-backup数据备份
- Matlab保留工作区变量教程
- ansible playbook详细教程(笔记)
- 医用红外线灯的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- WebShell连接工具(中国菜刀、WeBaCoo、Weevely)使用
- 5G工作原理详解(解释图解)
- [ArrayList删除元素] 你需要了解的ArrayList如何安全的删除重复元素/ list去重
- 【matlab教程】18、删除变量
- 怎样找自己研究领域的论文
- 【自然语言处理】【细粒度情感分析】细粒度情感分析:了解文本情感的What、How、Why
热门文章
- leetcode:剑指 Offer 56 - I. 数组中数字出现的次数
- css 图片上使用position定位图片,缩小屏幕 图片会跑(已解决)
- crmeb开源版二开好方便
- 基于Ubuntu 18.04.3操作系统的TensorFlow 2.1.0、PyTorch 1.4.0、OpenCV 4.2.0、Darknet深度学习环境搭建
- KMPlayer show every frame timestamp
- vb.net开发vbe插件,在vbe界面生成类似任务窗格的窗体
- iOS开发系列–音频播放、录音、视频播放、拍照、视频录制
- RecycleView 实现左右列表并排
- 计算机盘点报告,盘点:5款电脑表格软件,哪款才是你的心头好?
- 1227 飞机座位分配概率