使溢出隐藏的父元素外可见浮动子元素

Question

在CSS中，父容器设置overflow:hidden以允许其随其浮动的子元素的高度而扩展。但与margin:auto结合时，它还具有另一个有趣的特性......如果前一个兄弟元素是浮动元素，则它实际上会显示在其旁边。也就是说，如果兄弟元素是float:left，则具有float:none overflow:hidden的容器将出现在该兄弟元素右侧，没有换行符-就像在正常流中浮动一样。如果前一个兄弟是float:right，则容器将出现在该兄弟元素的左侧。调整此容器的大小将准确地显示它居中在浮动元素之间。假设您有两个先前的兄弟，一个是float:left，另一个是float:right，则容器将居中在两者之间。

那么这里的问题是...

如何在不遮盖子项的情况下保持此类布局？在网上搜索可以找到如何清除浮动并扩展容器的方法...但我无法找到任何替代解决方案来保持左/右前一个子居中。如果将容器设置为overflow:visible，则容器会突然忽略浮动元素的布局流，并在浮动元素上方呈现。因此问题是：我必须让容器overflow:hidden以保留布局...如何使子元素不被遮盖？我需要将子元素绝对定位相对于容器外的父元素。或者，如何使用overflow:visible，以便我可以绝对定位相对于容器外的父元素的子元素...但又保持兄弟浮动式布局流？

- marknadal

Answer 1

你可以使用clearfix来做“布局保持”，就像使用overflow: hidden一样。

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

将 class="clearfix" 类添加到父元素，并移除 overflow: hidden;

- Frexuz

---

哦！聪明，我现在正在尝试它。目前我得到的是生成的内容表现正确，保留在布局流中，但父元素仍会忽略它并覆盖浮动元素。不过，这是一个非常好的想法，我会继续尝试看看能否使其表现正确，并回来投票。谢谢 :)。 - marknadal

@user1671639，你的例子并不适用于清除浮动。你需要其他的东西，所以我建议你发布一个带有你的问题的问题。 - Frexuz

这与 overflow:hidden 的工作方式完全不同。将 clearfix 应用于父 div 并不能使所有子组件与父组件具有相同的高度。 - Khom Nazid

Answer 2

虽然这是一个旧问题，但我自己也遇到了这个问题。

我有一些情况下的半解决方案（针对“在overflow:hidden父元素中显示子元素”的前提问题）

如果父 `div` 不需要设置为 `position:relative`，只需将子元素的样式设置为 `visibility:visible`。

如果父 `div` 需要设置为 `position:relative`，我唯一发现的显示子元素的方法是使用 `position:fixed`。 在我的情况下，这对我起作用，但我想象它在其他情况下可能不起作用。

以下是一个糟糕的示例，只需将其发布到 HTML 文件中即可查看。

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

- Thomas Davis

---

这里有一个糟糕的例子，只需将其发布到HTML文件中即可查看。 <code> <div style =“background：＃ff00ff; overflow：hidden; width：500px; height：500px; position：relative;”><div style =“background：＃ff0000; position：fixed; top：10px; left：10px;”> asd <div style =“background：＃00ffff; width：200px; overflow：visible; position：absolute; visibility：visible; clear：both; height：1000px; top：100px; left：10px;”> a </div> </div> </div> </code> - Thomas Davis

谢谢您尝试回答，但这种方法不起作用，因为fixed定位会自动相对于视口定位元素，这意味着它不会随父元素移动。实际上，如果您的页面有滚动条，它将随着滚动保持在10px、10px的位置。 - marknadal

如果父级div确实需要position:relative，我发现唯一可能显示子元素的方式是position:fixed。感谢您的建议。我有一个气泡帮助框需要溢出，即使父容器设置了overflow：scroll。最终我使用了一个绝对定位的div，内部相对定位，然后一个固定定位的内容区域。 - JackMorrissey

谢谢，这对我有用。我的父元素使用了相对定位，因为它的位置是使用 left 设置的，所以这是必需的。使用 margin-left 可以实现相同的效果，因此我不再需要使用相对定位了。 - Felipe Castro

Answer 3

对我来说，发布的回答都不起作用。但是为子元素设置 position: absolute 确实起作用了。

- reflexiv

---

如果子 DIV 超出了父 DIV 的边界（而父 DIV 设置了 overflow:hidden），那么父 DIV 是否会遮挡子 DIV？ - marknadal

只要父元素没有 position:relative 属性，那么子元素的定位不会受到影响。此时，子元素会相对于第一个有定位属性（非static）的祖先元素进行定位，脱离常规的（父元素的）dom流程。 - Pim Schaaf

如果父元素确实具有position:relative属性，但不需要它，您可以将其设置为position:unset。 - yeahlad

如果它的 position: fixed 或绝对定位相对于父元素之外具有 visibility: hidden，那么它将可见。然而，通常需要（想要）相对于父元素进行定位以更好地适应代码更改。那么这些解决方案就不是一个选择。 - ArneHugo

@marknadal 这正是我现在遇到的问题，这也导致了我提出这个问题。 - Fiddle Freak

Answer 4

对于其他人，如果clearfix无法解决此问题，请为未浮动的同级元素添加与已浮动同级元素的宽度相同的外边距。

- Walf

Answer 5

尝试将父元素的位置更改为静态（而非相对），并在子元素中添加 'visibility: visible'？

我遇到了类似的问题，这个方法对我有效。

- smiley-cat

Answer 6

如果这种方法不起作用，尝试在需要滚动条的组件中使用vh来指定高度。

.parent {
     overflow: hidden;
}

.child {
     overflow: overlay;
     height: 100vh;
}

- Kunal Tyagi

---

是的，它起作用了！我想这对其他人来说会更清晰.parent { overflow: hidden; } .child { overflow: overlay; height: 100vh; } - Rajesh

Answer 7

只需在父元素中添加 position: static 即可。（Bootstrap 下拉菜单示例）

HTML

<div class="menu px-3">
  <li class="dropdown tab"> <!-- this is one you should add position: static to -->
    <a role="button" data-bs-toggle="dropdown" class="nav-link dropdown-toggle">
    Click to show dropdown<span class="caret"></span>
    </a> 
    <ul class="dropdown-menu show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(122px, 130px, 0px);" data-popper-placement="bottom-end">
      <li>
        <a href="#" class="dropdown-item text-16 gray-1 tab">
        Link one
        </a>
      </li>
      <li>
        <a href="#" class="dropdown-item text-16 gray-1 tab ">
        Link two
        </a>
      </li>
    </ul>
  </li>
</div> 

CSS

div.menu {
  overflow-y: hidden;
  overflow-x: auto;
}
li.dropdown {
  position: static;
}

请返回此链接以获取更多信息

- Safwat Fathi