Why Does a Parent Div Collapses to Zero Height When Its Children Are Floated?

Understanding Zero Parent Div Height with Floated Children

In CSS, when a div contains floated children, it can sometimes result in the parent div having a zero height. This phenomenon may seem perplexing, given that the content appears rendered correctly on the page.

The explanation lies in the CSS layout model. Floated content, like the ".content" and ".lbar" divs in the provided HTML example, is removed from the normal flow of the document and placed alongside the content following it. This means that the floated content no longer influences the height of its container div.

In the absence of any non-floating content, the parent div ("#wrapper") contains no elements that contribute to its height. Consequently, it collapses to a height of 0px, even though its children appear on the page.

To address this issue and ensure that the parent div remains visible, developers can employ techniques such as:

• Overflow Hiding: Setting "overflow: hidden" on the parent div establishes a new block formatting context, forcing the div to contain its floated children and maintain a non-zero height.
• Non-Floating Content: Adding non-floating content, such as a text node or a clear element, within the parent div allows the div to establish a height based on that content.

Understanding this behavior prevents frustration and enables developers to effectively create desired layouts without unexpected height issues.

The above is the detailed content of Why Does a Parent Div Collapses to Zero Height When Its Children Are Floated?. For more information, please follow other related articles on the PHP Chinese website!