为什么有时父元素无法包含子元素?

本文探讨了CSS布局中的一种特殊情况:父元素显示为0x0,而子元素却有实际尺寸。总结了几种导致该现象的原因,包括使用相对定位、负边距及浮动元素未被包含等,并提供了相应的解决方案。

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

在css布局中,有时会出现以下现象:父亲元素可能为0x0,而子元素实际上是有尺寸的。总结一下有以下几种场景会导致这种情况发生:

  1. If the child uses position: relative; top: 200px and move away from the parent.

  2. If the child does something similar using a negative margin. (similar to 1)

  3. If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.

详情参考so: https://stackoverflow.com/questions/4212940/css-why-some-parent-divs-area-didnt-cover-child-div

转载于:https://www.cnblogs.com/kidsitcn/p/6925996.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值