今天小编跟大家讲解下有关css清除浮动clearfix:after的用法详解（附完整代码） ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css清除浮动clearfix:after的用法详解（附完整代码） 的相关资料，希望小伙伴们看了有所帮助。
网上常用的完整代码：
CSS Code复制内容到剪贴板 .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }如果外部有一个div容器 其内部div容器设置了float样式 则外部的容器div因为内部没有clear 导致不能撑开。解决方法： CSS代码：
CSS Code复制内容到剪贴板 .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中的内容 //转移字符“\” MacIE浏览器会忽略掉这段Hack 但是WindowsIE不会以下是详细解释：
首先 清除浮动的原理 其实 是元素留出足够多的 垂直外边距 给浮动的元素。
复制代码代码如下:<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的实际应用可以参考这篇文章： https:///css/80068.html
来源：爱蒂网
