当前位置：首页
> 正文
WEB标准化：如何理解clearfix含义？
作者：大山发布时间：2023-02-18浏览：454
.clearfix:after {...}{
content: ".";
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size:0;
}
.clearfix {...}{ *zoom:1;}
*html.clearfix{height:1%;}
.clearfix{display:block;}
//clearfix的CSS使用了after这个伪对象
//应用clearfix的元素的结尾添加content中的内容
//转移字符“”，MacIE浏览器会忽略掉这段Hack，但是WindowsIE不会
以下是详细解释：
首先清除浮动的原理，其实是元素留出足够多的垂直外边距给浮动的元素。
因为浮动的元素脱离了原始文档流。以上面这个为例：一般而言，有三种方式清除浮动
。第一：让外层元素也浮动，例如：
代码如下:
然后再此元素之外的元素上添加clear：both效果。 第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法： 代码如下: .clearfix:atfer{ content:"."; display:block; visibility:hidden; height:0; clear:both; } .clearfix{display:inline-block} .clearfix{display:block} 其中后面的两个是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。
声明：部分资源转载自互联网，转载目的在于传递更多知识，并不代表本网赞同其观点和对其真实性负责。如有侵权或者知识有谬误之处，麻烦通知删除，谢谢！联系方式: zzsla2022#163.com
