How Does `overflow: hidden` Affect Floated Elements and Subsequent Content?

CSS overflow:hidden with Floats

Understanding the Impact of Overflow Property

The overflow property in CSS specifies the handling of content that exceeds the boundaries of its containing element. When applied to an element with floated child elements, it establishes a new block formatting context.

Effect on Text Placement

Consider the following code snippet:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}

By default, a paragraph (p) element appearing after the ul would be pushed to the bottom because ul is a block-level element. However, when overflow is set to hidden on the ul, the following occurs:

• The ul establishes a block formatting context, containing its float child elements (the lis).
• The ul "reappears" and no longer collapses to a height of 0px.
• The paragraph (p) is pushed to the end of the ul's content, appearing after the floated elements.

This is because overflow:hidden creates a new formatting environment where the ul acts like a block-level element, containing its child elements.

Technical Explanation

According to the CSS specification:

• When overflow is 'visible': "Non-replaced block-level elements do not establish a new block formatting context, regardless of their float property." ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• When overflow is set to a non-'visible' value: "A block formatting context is established by the root element of any subtree whose root element is the root of the child list of an inline-level or atomic inline-level element, the element is floating, is absolutely positioned, or has 'overflow' other than 'visible'." ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#containing-block))

Setting overflow:hidden on the ul creates a new block formatting context, causing it to contain its child elements and push the paragraph to the bottom.

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