Home >Web Front-end >CSS Tutorial >How to Prevent Overflow:hidden from Hiding Floating Children in CSS?

How to Prevent Overflow:hidden from Hiding Floating Children in CSS?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-01 04:46:27687browse

How to Prevent Overflow:hidden from Hiding Floating Children in CSS?

Preserving Child Visibility in Overflow: Hidden Containers

In CSS, the overflow: hidden property conceals overflowing content within a container. However, when applied to parents of floating children, an intriguing effect occurs. The container automatically aligns itself adjacent to its floating siblings, creating a layout where a floating element's parent appears juxtaposed to it.

Problem Statement:

The challenge lies in maintaining this layout without concealing the children. By making the container overflow: visible, the container disregards the floating elements' flow, appearing on top of them.

Solution:

To overcome this, utilize the "clearfix" technique. By appending the "clearfix" class to the parent and removing overflow: hidden, the following CSS rules maintain the desired layout:

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

This approach effectively "clears" floating elements while preserving their layout, allowing the parent container to align itself adjacent to them without masking its children.

The above is the detailed content of How to Prevent Overflow:hidden from Hiding Floating Children in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn