别自制压力，我们没有必要跟着时间走，只需跟着心态和能力走，随缘，尽力，达命，问心无愧，其他的，交给天。
网上常用的完整代码：
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;}
- /*HidesfromIE-mac\*/
- *html.clearfix{height:1%;}
- .clearfix{display:block;}
- /*EndhidefromIE-mac\*/
- //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://www.haodaima.com/css/80068.html
本文css清除浮动clearfix:after的用法详解（附完整代码）到此结束。过去的习惯，决定今日的你，所以，过去的懒惰，决定你今日的一败涂地。小编再次感谢大家对我们的支持！
