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

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

以下是详细解释：

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

复制代码代码如下:
<div >
<div style="float:left"></div>
</div>

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

复制代码代码如下:
<div style="float:left" >

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表