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 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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的网址
2006/11/25 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
给ECShop添加最新评论
2015/01/07 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
反邪教警示教育方案
2014/05/13 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
公司新人试用期自我评价
2014/09/17 职场文书