本文所分享的知识点是【css清除浮动clearfix：after的用法详解】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
css清除浮动clearfix：after的用法详解
如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。
解决方法：
CSS代码：
.clearfix:after {
content: "." ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
.clearfix{ display: inline-block; }
*html .clearfix{ height:1%; }
.clearfix{ display:block; }
//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的实际应用可以参考这篇文章： http://www.jb51.net/css/80068.html
关于css清除浮动clearfix：after的用法详解的相关讨论如下：
相关问题：clearfix:after 清除浮动的方法在dreamweaber 里显...
答：如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。 解决方法： CSS代码： 代码如下: .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clear... >>详细
相关问题：.clear和.clearfix:after的区别，分别什么样的情况...
答：这是两种清除浮动的方式，.clear 就是在需要清除浮动的父元素内部的所有浮动元素后面添加一个无意义的空标签来清除浮动，并且自定义其CSS为clear:both，加上其它属于是为了让这个标签不受其它因素的影响；.clearfix:after 就是利用after伪对象来... >>详细
相关问题：.clear和.clearfix:after的区别，分别什么样的情况...
答：这跟优化有什么关系？ 这两条CSS是不同的两个东西怎么能比较哪个好坏呢？ .clear是选择器而已，就是为class为clear的元素规定样式 .clear:after是加外一种东西，after是个伪元素，意思就是在class为clear的元素后面加入新内容。 clearfix:after{... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-