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)]](https://i-blog.csdnimg.cn/blog_migrate/1769ca75e2dbaeeddaaf9d0a706d217d.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cc2eaa11a9ec08562515b1628459b62a.png)
2父级添加overflow:hidden
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/10a8191776bcefbdca6e5b2b8e5c0d00.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/747ab555395630c825bb89b51d97675a.png)
3. 父级after伪元素
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7fad3a054b51eb3d58f37d7d88a8bec6.png)