css之clearfix的用法深入理解(必看篇)


Posted in HTML / CSS onMay 21, 2023

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子:

Div布局如下:

css之clearfix的用法深入理解(必看篇)

Css代码如下:

.out{border:1px solid #F00; width:500px;}   
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}   
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}

IE和FF显示如下图:

css之clearfix的用法深入理解(必看篇)

传统的人解决方法:

css之clearfix的用法深入理解(必看篇)

但是,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,最好使用下面clearfix方法。外层div加上clearfix样式。

clearfix定义如下:

.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}   
.clearfix{*zoom:1;}

css之clearfix的用法深入理解(必看篇)

这样修改以后显示正常。

那段代码是用来清除浮动的。

以下代码可以这么解释:

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容;   
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。   
    display: block;   <----加入的这个元素转换为块级元素。   
    clear: both;     <----清除左右两边浮动。   
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;   
    height: 0;     <----高度为0;   
    font-size:0;    <----字体大小为0;   
}

整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。(这个css的原理是经过使用 after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素 (display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.)

之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。

.clearfix { *zoom:1;}   <----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

以上这篇css之clearfix的用法深入理解(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

 
HTML / CSS 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 #HTML / CSS
HTML中link标签属性的具体用法
May 07 #HTML / CSS
css弧边选项卡的项目实践
May 07 #HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 #HTML / CSS
CSS实现鼠标悬浮动画特效
CSS link与@import的区别和用法解析
May 07 #HTML / CSS
html,css,javascript是怎样变成页面的
May 07 #HTML / CSS
You might like
php&amp;java(三)
2006/10/09 PHP
php 过滤器实现代码
2010/08/09 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
js css自定义分页效果
2017/02/24 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
python类继承用法实例分析
2015/05/27 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
python批量修改文件名的示例
2020/09/27 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
电子商务实训报告总结
2014/11/05 职场文书
董存瑞观后感
2015/06/11 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书