html中清除浮动after,html中:after伪元素清除浮动如何实现

html中:after伪元素清除浮动如何实现

发布时间：2020-09-26 15:44:29

来源：亿速云

阅读：73

作者：小新

这篇文章给大家分享的是有关html中:after伪元素清除浮动如何实现的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

:after伪元素和:before伪元素分别用于在元素之后和之前添加内容，实际网页开发过程中:after伪元素比较常用，借助:after伪元素一般用于清除浮动，利用伪元素来清除浮动是常规浮动清除的三种方式之一，也是最常用、最为推荐的一种方式。

：after清除浮动

.out {

width:200px;

border: 5px solid red;

}

.out:after{

content: '';

display: block;

width: 0px;

height: 0px;

clear: left;

}

.in {

width: 100px;

height: 100px;

float:left;

}

效果如图：

感谢各位的阅读！关于html中:after伪元素清除浮动如何实现就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！