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

DDD
Release: 2024-11-12 02:18:01
Original
449 people have browsed it

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template