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 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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:风雨欲来 路在何方?
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
告诉大家什么是JSON
2008/06/10 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
python合并同类型excel表格的方法
2018/04/01 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Django实现简单的分页功能
2021/02/22 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
先进事迹演讲稿
2014/09/01 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
红旗渠导游词
2015/02/09 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书