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:
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!