CSS中清除浮动的原因以及方法

最新推荐文章于 2024-08-24 13:47:49 发布

专注且自信

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量71

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_56783154/article/details/121601030

版权

1. 清除浮动

为什么清除浮动

父盒子没有设置高度
子盒子浮动了
影响下面布局了

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级添加overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

1. 额外标签法

即在父盒子最下面添加一个div标签，并设置clear:both

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a6U60ojM-1638117522537)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211120172442521.png)]$
在这里插入图片描述

2父级添加overflow:hidden

在这里插入图片描述

3. 父级after伪元素

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

专注且自信

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中清除浮动的原因以及方法

1. 清除浮动为什么清除浮动父盒子没有设置高度子盒子浮动了影响下面布局了清除浮动的方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差父级添加overflow:hidden;书写简单溢出隐藏父级after伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题父级双伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题1. 额外标签法即在父盒子最下面添加一个div标签，并设置cl
复制链接

扫一扫