How Does `overflow:hidden` Affect Floated Elements and Their Parent Container?

CSS overflow:hidden and Float Behavior

In CSS, the overflow property controls how content behaves when it exceeds the size of its container. When applied to an element with floated children, overflow:hidden has a specific impact on the layout.

Impact on Float Behavior

In the provided example, the ul element has several floated li children. Without overflow:hidden, the ul would collapse to a height of 0px, with its contents hidden from view. This is because floated elements are removed from the normal flow, causing the parent element to collapse.

However, when overflow:hidden is applied to the ul, it establishes a new block formatting context (BFC). A BFC is a region in which child elements are contained and do not affect the layout of elements outside the region.

By creating a BFC, overflow:hidden prevents the ul from collapsing. Instead, it remains visible, containing its floated children. This allows text or other elements outside the BFC, such as the p element in this case, to appear after the ul, rather than to its right.

Applying Clear Effects

In addition to containing child elements, a BFC also has the effect of clearing floats. This means that any text or elements following the ul will appear on a new line below it. This is known as a "float clear."

Summary

In CSS, overflow:hidden applied to an element with floated children:

• Creates a new block formatting context, containing the children.
• Prevents the parent element from collapsing.
• Acts as a float clear, ensuring that content following the BFC appears on a new line.

The above is the detailed content of How Does `overflow:hidden` Affect Floated Elements and Their Parent Container?. For more information, please follow other related articles on the PHP Chinese website!