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
Release: 2024-11-01 04:46:27
Original
685 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template