如何在保留布局的同时保持溢出隐藏容器中的元素可见性？

在溢出隐藏容器中保持元素可见性

在CSS中，在父容器上设置overflow:hidden可以让它们根据高度扩展他们漂泊的孩子们但是，此功能存在局限性，特别是容器内子项的屏蔽。

当用户想要保持具有浮动子项的容器的左/右居中，同时保留容器外部元素的可见性时，就会出现问题。使用溢出：可见可以消除遮蔽问题，但会破坏布局流程。

解决方案 1：使用 Clearfix

解决方案是利用clearfix 技术，该技术可以有效地模拟溢出的布局保留行为：隐藏而不屏蔽子项。 CSS 代码如下：

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE <p>将clearfix 类应用于父容器并删除overflow:hidden。这可确保在子级保持可见时保留布局。</p>
<p><strong>解决方案 2：通过溢出可见保留浮动同级布局</strong></p>
<p>另一种方法是使用溢出：可见并使用绝对定位策略性地将子元素定位在容器外部。但是，要保留同级浮动式布局流，需要执行以下步骤：</p>
<ol>
<li>将子元素设置为绝对位置。</li>
<li>根据以下内容计算子元素的正确位置父元素的宽度和兄弟元素的位置。</li>
<li>随着父元素大小的变化动态调整子元素的位置，以确保与兄弟元素对齐。</li>
</ol></code>

以上是如何在保留布局的同时保持溢出隐藏容器中的元素可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！