css – 为什么孩子垂直边距不能扩展父容器?

前端之家收集整理的这篇文章主要介绍了css – 为什么孩子垂直边距不能扩展父容器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到一个案件,我需要一个孩子的边距来扩展父容器。我发现父节点之外的空间被分配,但父本身不被展开。然后我发现通过向父级添加“overflow:hidden”,我可以解决这个问题。

任何人都可以说明为什么会这样吗?

更新:

我发现添加任何填充或边框值给父代也修复了这一点。

Updated Example

解决方法

“为什么”的答案描述得很好和简洁 here.有一些属性建立了“ block formatting context”。即:

Floats,absolutely [and fixed] positioned elements,block containers (such as
inline-blocks,table-cells,and table-captions) that are not block
Boxes,and block Boxes with ‘overflow’ other than ‘visible’ (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.

这是块格式上下文的这种变化,这就是为什么在评论中给出的上述解决方案如何运作的缘故(以及前一个浮动的情况下,后续流入元素的填充)的原因。

猜你在找的CSS相关文章