搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-02-27 20:03:39 来源：互联网
.
别自制压力，我们没有必要跟着时间走，只需跟着心态和能力走，随缘，尽力，达命，问心无愧，其他的，交给天。

网上常用的完整代码：

CSS Code复制内容到剪贴板
  1. .clearfix:before,.clearfix:after{
  2. content:"";
  3. display:table;
  4. }
  5. .clearfix:after{
  6. clear:both;
  7. overflow:hidden;
  8. }
  9. .clearfix{
  10. *zoom:1;
  11. }


如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。
解决方法：

CSS代码：

CSS Code复制内容到剪贴板
  1. .clearfix:after{
  2. content:".";
  3. display:block;
  4. height:0;
  5. clear:both;
  6. visibility:hidden;
  7. }
  8. .clearfix{display:inline-block;}
  9. /*HidesfromIE-mac\*/
  10. *html.clearfix{height:1%;}
  11. .clearfix{display:block;}
  12. /*EndhidefromIE-mac\*/
  14. //clearfix的CSS使用了after这个伪对象
  15. //应用clearfix的元素的结尾添加content中的内容
  16. //转移字符“\&;，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的用法详解（附完整代码）到此结束。过去的习惯，决定今日的你，所以，过去的懒惰，决定你今日的一败涂地。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： css clearfix
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图