700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML:利用:after伪元素清除浮动

HTML:利用:after伪元素清除浮动

时间:2021-06-12 23:24:45

相关推荐

HTML:利用:after伪元素清除浮动

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>:after清除浮动</title><style>.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;}</style></head><body><div class="out"><div class="in" style="background-color: blue;"></div><div class="in" style="background-color: green;"></div></div></body></html>

效果如图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。