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 26 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 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中for循环语句的几种变型
2007/03/16 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
js实现图片实时时钟
2020/01/15 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
python绘制简单折线图代码示例
2017/12/19 Python
python查看模块安装位置的方法
2018/10/16 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
五心教育心得体会
2014/09/04 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers