修复 CSS3 中的折叠问题

大家好！今天我将讨论 CSS 中不同类型的折叠问题，以及如何修复它们。

什么是崩溃的定义？

折叠元素是指高度为零的元素。

我们将讨论以下几种类型的坍塌：

1. 浮动元素折叠。2
. 边距折叠。3
. 绝对定位折叠。4
. 空div折叠。

浮动元素坍塌。

这是浮动元素常见的问题。

如果一个元素只包含浮动元素，那么它的父元素将会折叠。

修复它

我们将运用著名的“清除修复”方法来解决这个问题。

这是对父元素的后伪元素应用的修复。

利润率暴跌。

当您为一个元素设置了 margin-top，并为它上面的元素设置了 margin-bottom 时，就会发生边距折叠，此时两个元素之间的总边距是它们之间的最大边距，而不是两个边距之和。

修复它

要消除这种影响，请将这两个元素中的一个的 display 属性设置为 inline-block。

绝对定位崩溃。

如果包含绝对元素的父容器没有显式的高度或宽度，则会发生这种类型的折叠。

修复它

解决方法是给父容器指定一个明确的高度或宽度。

注意：在设置高度时，不要使用百分比，因为没有明确指定此父元素（body）的父元素。

空 div 折叠。

如果一个div元素为空，没有任何内容，那么它就会折叠。

修复它

我们可以通过编写与空格对应的HTML 特殊实体 来在 div 中插入一些内容。

另一种解决方法是为 div设置最小高度或固定高度（不使用百分比）。

今天就到这里啦！希望你有所收获。祝你好运！