简述 clearfix 的原理

最新推荐文章于 2022-10-13 10:58:46 发布

weixin_34265814

最新推荐文章于 2022-10-13 10:58:46 发布

阅读量368

点赞数

原文链接：https://juejin.im/post/5a30fe6e51882503dc53b441

版权

本文解析了CSS中clearfix样式的实现原理。通过::after伪元素插入一个不可见的内容，并使用clear:both清除浮动，达到布局效果。这种方法等效于在元素末尾添加一个用于清除浮动的空div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Demo Demo中的CSS中用到这样一个样式:

.clearfix:after{
  content: '';
  display: block;
  clear: both;
复制代码

该样式通过::after选择器在选择元素之后插入content: ''单引号中的内容，该内容不可被选定，例子中中插入内容为空。对这个空元素添加clear:both，使其清除浮动。相当于在内容末尾添加一个空的div，然后清除浮动。

转载于:https://juejin.im/post/5a30fe6e51882503dc53b441

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。