Why Does My Parent Container Have 0 Height When I Float Its Children?

Floated Content and Container Height Confusion

In CSS, floating elements are positioned outside the normal document flow and do not affect the height of their parent container. This behavior can seem counterintuitive, especially when the page renders correctly.

Understanding the Issue

Consider the following CSS:

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

When an HTML structure like this is created:

<div>

The page will render correctly, but upon inspection, the parent div#wrapper will show a height of 0px. This happens because floated content, like .content and .lbar, are removed from the normal flow and occupy positions outside of any block content.

Resolving the Height Issue

To ensure the parent container expands to the height of its floated content, there are two main techniques:

• Overflow: Hidden: Setting overflow: hidden on the container element establishes a new block formatting context, which forces the container to take into account the height of its floated child.
• Containing Floats: Other methods for containing floats exist, such as using inline-block, pseudo elements, and wrapping the floated elements in another container.

Understanding this aspect of CSS layout is crucial for creating web pages with accurate sizing and flow.

The above is the detailed content of Why Does My Parent Container Have 0 Height When I Float Its Children?. For more information, please follow other related articles on the PHP Chinese website!