您现在的位置是：网站首页> 编程资料编程资料

css清除浮动clearfix:after的用法详解（附完整代码）浅谈css清除浮动(clearfix和clear)的用法CSS中使用clearfix清除浮动的方法用clearfix:after消除css浮动解决外部div不能撑开问题css中clearfix清除浮动的用法及其原理示例介绍css之clearfix的用法深入理解(必看篇)

2021-09-07 831人已围观

简介如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开

网上常用的完整代码：

CSS Code复制内容到剪贴板

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

CSS代码：

CSS Code复制内容到剪贴板

以下是详细解释：

首先清除浮动的原理，其实是元素留出足够多的垂直外边距给浮动的元素。

复制代码

代码如下:

这个效果是外层div不会包含内层div。因为浮动的元素脱离了原始文档流。
以上面这个为例：一般而言，有三种方式清除浮动
。第一：让外层元素也浮动，例如：

复制代码

代码如下:

然后再此元素之外的元素上添加clear：both效果。
第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法：

复制代码

代码如下:

.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}

.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。
第三：利用 overflow属性

复制代码

代码如下:

关于clearfix:after的实际应用可以参考这篇文章： https://www.jb51.net/css/80068.html