How to Prevent CSS Background from Hiding Content When Using Floating Elements?

CSS Background Color with Floating Elements

Consider the following HTML code:

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</div>

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</div>

And the corresponding CSS:

 .content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

 .left {
     float: left;
     height: 300px;
     background: green;
 }

 .right {
     float: right;
     background: yellow;
 }

When adding content to .right, the parent .content div fails to stretch to accommodate the height of its child, resulting in an invisible red background covering the expanded area.

Understanding the Problem

Floating elements, like .left and .right in this case, are removed from the normal flow of the document. This impacts the parent element, as it no longer has a defined height due to the children not occupying physical space. Consequently, the parent element collapses in on itself.

Solution: Maintaining Box Dimensions

To rectify this issue, it's necessary to force the parent element to maintain its dimensions despite the floating child elements. This can be achieved by adding overflow: hidden to .content.

.content {
    overflow: hidden;
}

Alternatively, overflow: auto can be used, providing similar functionality while allowing you to identify any height discrepancies.

This modification ensures that .content encapsulates its floating children, resolving the issue of the truncated red background.

Alternative: Clearfix

For browsers with limited support, using a clearfix hack can address this problem. However, this approach is not recommended for modern browser compatibility.

The above is the detailed content of How to Prevent CSS Background from Hiding Content When Using Floating Elements?. For more information, please follow other related articles on the PHP Chinese website!