Why Does a Container with Floated Children Have a Zero Height?

Understanding Container Height with Floated Children

When working with CSS, you may encounter a situation where a parent container with floated children ends up with a height of zero. This behavior can be confusing, given that the children are occupying space within the container.

The Issue

Consider the following CSS:

If you use this CSS with the following HTML:

The page will render correctly. However, if you inspect the elements, you'll notice that the div#wrapper is shown as 0px high.

Why It Happens

Content that is floated does not influence the height of its container. In this case, both the .content and .lbar elements are floating, so they are removed from the normal flow of the document. As a result, the container contains no content that isn't floating. This allows the height of the container to collapse to zero, just as if it were empty.

Solutions

To address this issue, you can use the following methods:

• overflow: hidden: Setting this property on the container will prevent the content from overflowing outside its bounds. This establishes a new block formatting context, which forces the container to expand to accommodate its floated children.
• Containing Floats: Other techniques for containing floats include using the clear property or adding an empty div with clear: both; at the end of the container.

Understanding this behavior of floats is essential for creating layouts with CSS. By employing the appropriate techniques, you can ensure that your containers have the desired height and that your page elements are correctly positioned.

The above is the detailed content of Why Does a Container with Floated Children Have a Zero Height?. For more information, please follow other related articles on the PHP Chinese website!