How Does `overflow: hidden` Impact Floated Elements Within a `` and Subsequent Text Placement?

CSS overflow:hidden with Floats Explained

Question: How does the overflow property affect the placement of text relative to a ul containing floated elements?

Explanation:

By default, block-level elements like ul and p stretch to 100% of the parent width. In the given example, the ul contains only floated li elements, causing it to collapse to a height of 0px while still maintaining its full width.

As a result, the adjacent p element appears to the right of the floated li elements, treating them as normal floats.

However, when overflow:hidden is applied to the ul, it establishes a new block formatting context (BFC), which effectively contains the li elements within the ul. This prevents the ul from collapsing and forces the p element to be pushed to the bottom, clearing the floated li elements.

Technical Details:

According to the CSS specification, when overflow is visible for block-level non-replaced elements in normal flow, they behave as standard block elements. However, setting overflow to any non-visible value (including hidden) creates a BFC, which results in different behavior.

Example:

Consider the following code:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  border: 2px solid red;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #555;
  color: white;
}

p {
  margin: 0;
  outline: 2px dotted blue;
}

#two {
  clear: both;
  overflow: hidden;
}

Without Overflow:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p>
  Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats
</p>

With Overflow:

<ul>

As you can see, applying overflow:hidden to the ul forces the floated li elements to be contained within the ul and clears the p element, pushing it to the bottom of the page.

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