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 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
javascript求日期差的方法
2016/03/02 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中itertools模块用法详解
2014/09/25 Python
python 获取等间隔的数组实例
2019/07/04 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
软件测试面试题
2014/01/05 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
村委会贫困证明范文
2014/09/21 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电