使浮动子项在溢出之外可见：隐藏父项

Question

在 CSS 中，

overflow:hidden

设置在父容器上，以允许其随着浮动子容器的高度而扩展。

但与

margin: auto

结合时它还有另一个有趣的功能...

如果 PREVIOUS 同级元素是浮动元素，它实际上会与其并列显示。也就是说，如果同级是

float:left

，那么带有

float:none overflow:hidden

的容器将出现在同级的右侧，没有换行符 - 就像它漂浮在正常流程中一样。如果前一个同级是

float:right

那么容器将出现在同级的左侧。调整此容器的大小将准确地显示它位于浮动元素之间的中心。假设您之前有两个兄弟姐妹，一个

float:left

另一个

float:right

，则容器将显示在两者之间的中心。

所以这就是问题...

如何在不屏蔽子项的情况下保持这种类型的布局？

在网络上进行谷歌搜索，为我提供了如何

clear:both

和扩展容器的方法......但我找不到任何替代解决方案来保持左/右上一个子项居中。如果您将容器制作为

overflow:visible

，那么容器会突然忽略浮动元素的布局流程，并显示为分层在浮动元素之上。

那么问题：

我必须有容器

overflow:hidden

来保留布局......

我怎样才能让孩子们不被蒙住？我需要让子级相对于容器外的父级绝对定位。

或

我如何

overflow:visible

这样我就可以绝对地将子级相对于容器外的父级定位...但仍保留同级浮动式布局流？

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;

Answer 2

发布的答案都不适合我。不过，为子元素设置

position: absolute

确实有效。

Answer 3

这是一个老问题，但我自己也遇到过。

我有针对前一个问题的情况的半解决方案（“孩子在溢出中可见：隐藏的父母”）

如果父级div不需要是position:relative，只需将子级样式设置为visibility:visible即可。

如果父div确实需要位置：相对，我发现显示子级的唯一可能方法是位置：固定。幸运的是，这对我的情况有效，但我想它对其他人不起作用。

这是一个蹩脚的例子，只需将其发布到 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>

Answer 4

对于其他人，如果clearfix不能为您解决这个问题，请为非浮动同级添加边距，该边距与浮动同级的宽度相同。

Answer 5

尝试将父级的位置更改为静态（非相对）并向子级添加“可见性：可见”？

我遇到了类似的问题，这对我有用。

Answer 6

对于其他人，如果这不起作用，请尝试在需要滚动条的组件中的

vh

中给出高度。

.parent {
     overflow: hidden;
}

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

Answer 7

只需向父级添加一个position: static 即可。 （引导下拉菜单示例）

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

    <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> 

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