css清除浮动clearfix:after的用法详解(转)
css清除浮动clearfix:after的用法详解
2015-12-10 23:11 by 流浪的诗人, 8099 阅读, 0 评论, 收藏, 编辑如果外部有一个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>
你的关注和支持是对我最大的动力~
书山有路群[一个非常活跃的读书分享群,每周都有新书分享]：452450927
微博：http://weibo.com/u/2241641312
出处：http://www.cnblogs.com/wdlhao/
github:https://github.com/wdlhao
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面
QQ群：762080163
