css清除浮动clearfix:after的用法详解(附完整代码)


Posted in HTML / CSS onMay 21, 2023

网上常用的完整代码:

.clearfix:before, .clearfix:after {   
    content:"";   
    display:table;   
}   
.clearfix:after{   
    clear:both;   
    overflow:hidden;   
}   
.clearfix{   
    *zoom:1;   
}

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开。

解决方法:

CSS代码:

.clearfix:after {                 
content: "." ;                    
display: block ;   
height: 0 ;   
clear: both ;   
visibility: hidden ;   
}   
.clearfix{ display: inline-block; }   
      /*  Hides from IE-mac  \*/         
*html .clearfix{ height:1%; }   
.clearfix{ display:block; }   
     /*  End hide from IE-mac   \*/  
     
//clearfix的CSS使用了after这个伪对象   
//应用clearfix的元素的结尾添加content中的内容    
//转移字符“ \ ”,Mac IE浏览器会忽略掉这段Hack,但是Windows IE不会

以下是详细解释:

首先 清除浮动的原理 ,其实 是元素留出足够多的 垂直外边距 给浮动的元素。

<div >
   <div style="float:left"></div>
</div>

这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例:一般而言 ,有三种方式清除浮动。

第一:让外层元素也浮动,例如:

<div style="float:left" >
   <div style="float:left"></div>
</div>

然后 再此元素之外 的元素上添加clear:both效果。

第二:给外层div的末尾添加一个元素,并利用此元素清楚浮动。

具体用法:

<div style="clearfix" >
   <div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}

.clearfix{display:inline-block}
.clearfix{display:block}

其中后面的两个 是为了兼容其他浏览器设置的。因为:after不是所有浏览器都支持的。

第三:利用 overflow属性

<div style="overflow:hidden" >
   <div style="float:left"></div>
</div>

当前比较好的方法

.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}

到此这篇关于css清除浮动clearfix:after的用法详解(附完整代码)的文章就介绍到这了,更多相关css clearfix内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 #HTML / CSS
You might like
PHP HTML代码串截取代码
2008/12/29 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
单位租车协议书
2015/01/29 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书