Html 流体div将其旁边的固定div向下推。它也不是'；t填充预期高度

我有两个相邻的潜水器-一个是固定的，一个是流体的。但是，每当我在fluid div中对段落应用边距顶部时，它不会填充div的整个高度，还会将旁边的固定div向下推。不幸的是，我不能使用overflow:auto来解决这个问题，因为我需要流体div具有overflow:visible，以满足非常特殊的需要。奇怪，我知道，但我相信一定有解决办法。然而，我已经尝试了几个小时，没有运气

这是我遇到的问题的演示。我在div中也加入了一个解释：

你成了我的牺牲品

块的顶部和底部边距有时合并（折叠）为单个边距，其大小为合并到其中的边距中最大的边距，这种行为称为边距折叠

就你而言：

父母和第一个/最后一个孩子

如果没有边框、填充、内联内容或间隙将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度将块的页边距底部与其最后一个子块的页边距底部分开，则这些页边距将折叠。折叠的页边距最终位于父页边距之外

<> P>有两种方法来解决这个问题，我只是使用填充来代替我所需要的布局，而不改变其他属性，我认为更危险。在这种情况下：

你成了我的牺牲品

块的顶部和底部边距有时合并（折叠）为单个边距，其大小为合并到其中的边距中最大的边距，这种行为称为边距折叠

就你而言：

父母和第一个/最后一个孩子

如果没有边框、填充、内联内容或间隙将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度将块的页边距底部与其最后一个子块的页边距底部分开，则这些页边距将折叠。折叠的页边距最终位于父页边距之外

<> P>有两种方法来解决这个问题，我只是使用填充来代替我所需要的布局，而不改变其他属性，我认为更危险。在这种情况下：

---

这是因为CSS框模型定义的折叠边距：

在CSS中，两个或多个框（可能是或 可能不是同级）可以合并形成单个页边距。边距 这种结合方式被称为崩溃，由此产生的结合 边距称为折叠边距

根据定义：

内联块框的边距不会折叠（即使使用它们的 流动儿童）

因此，将

p.withMargin

的显示更改为

inline block

，以避免这种行为

---

演示：

这是因为CSS框模型定义的边距缩小：

在CSS中，两个或多个框（可能是或 可能不是同级）可以合并形成单个页边距。边距 这种结合方式被称为崩溃，由此产生的结合 边距称为折叠边距

根据定义：

内联块框的边距不会折叠（即使使用它们的 流动儿童）

因此，将

p.withMargin

的显示更改为

inline block

，以避免这种行为

---

演示：

添加此

显示：内联块到
p.withMargin
添加此
显示：内联块
到
p.withMargin
我找到了另一个解决方案。在右div中创建一个新div，并将以下css应用于新div：

.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}

示例：
我找到了另一个解决方案。在右div中创建一个新div，并将以下css应用于新div：

.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}

示例：
谢谢，这也适用于“显示：内联块”解决方案。@AndSmith当然可以，但请注意，
display:inline block
解决方案可能会产生其他后果，因为您实际上正在更改显示类型，从而更改浏览器呈现该元素的方式（比如，如果有几个相邻的元素，等等）。我的解决方案不仅将元素保持为块类型，而且还可以（非常）工作不支持内联块的旧浏览器。旧的、久经考验的真实解决方案。您完全正确，我可以看到显示：内联块导致问题。填充解决方案似乎很理想。对于有此问题但有div的其他人，请将div包装在另一个div中，并将填充设置为父div。@AndSmith和rg三个边距和填充基本不同。如果要添加背景图像、背景色…或边框、阴影…则不能替换填充的边距。
display:inline block；
的定义保证其行为符合您的意愿，完全适合您的情况。@Arbel对，您也是Arbel。它们的用途取决于我猜是这种情况。谢谢，这也适用于“显示：内联块”解决方案。@和Smith当然可以，但请注意，
display:inline block
解决方案可能会有其他后果，因为您实际上正在更改显示类型，从而更改浏览器呈现该元素的方式（比如，如果有几个相邻的元素，等等）。我的解决方案不仅将元素保持为块类型，而且还可以（非常）工作不支持内联块的旧浏览器。旧的、经过尝试的、真实的解决方案。你完全正确，我可以看到显示：内联块导致问题。填充解决方案似乎很理想。对于有此问题但有div的其他人，请将div包装到另一个div中并设置填充
p.withMargin {
    padding-top: 100px;
    padding-bottom: 100px;
}

.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}