When elements are removed from the normal document flow via the float property, parent containers often fail to calculate their height correctly. This phenomenon, known as height collapse, disrupts subsequent layout structures. Consider a standard two-column layout where a sidebar sits next to main content:

<div class="page-frame">
  <div class="nav-column">Navigation Menu</div>
  <div class="content-area">Main article text goes here...</div>
</div>
<div class="footer-bar">Copyright Information</div>

.nav-column {
  float: left;
  width: 25%;
}
.content-area {
  width: 75%;
}

In this scenario, the .page-frame element collapses because it only calculates height based on non-floated content. Consequently, the .footer-bar may rise up and overlap with the floated sidebar. To maintain structural integrity, developers employ several clearing techniques.

Strategies for Clearing Floats

1. Applying Clear to Adjacent Siblings The clear property can be applied to the element immediately following the floated items. If .content-area sits below .nav-column in the DOM, adding clear: both to .content-area forces it below the float. This method only works if the clearing element is physically located after the floated element in the document structure.

2. Inserting an Empty Block Element An empty block-level element can be inserted at the end of the container before the closing tag. This element acts as a barrier.

<!-- Inside .page-frame -->
<div class="spacer-util"></div>

.spacer-util {
  clear: both;
  display: block;
}

3. Using Pseudo-Elements A more semantic approach involves using the ::after pseudo-element on the parent container. This injects a clearing block with out polluting the HTML markup.

.page-frame::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

4. Triggering a Block Formatting Context (BFC) Instead of clearinng floats explicitly, the parent container can be turned into a Block Formatting Context. A BFC is an isolated rendering region where the layout rules differ slightly from the normal flow. Crucially, when calculating the height of a BFC, floated children are included.

.page-frame {
  overflow: auto;
}

Understanding Block Formatting Context

A Block Formatting Context defines how block-level boxes are laid out within a specific region. It creates an independent environment for its children. Key characteristics include:

1. Boxes are stacked vertically from the top down.
2. Vertical margins between adjacent boxes within the same BFC may collapse.
3. The left edge of a box aligns with the left edge of its containing block.
4. A BFC region will not overlap with adjacent floated boxes.
5. The container is isolated; internal elements do not affect external layout.
6. Height Calculation: Floats inside the BFC contribute to the container's height.

BFC and Margin Collapsing

Margin collapsing occurs when vertical margins of adjacent blocks combine into a single margin equal to the largest of the two. Isolating elements within their own BFCs can prevent unwanted margin interactions.

<div class="outer-shell">
  <div class="mid-layer">
    <div class="inner-item">Content</div>
  </div>
</div>

.outer-shell {
  background: #f0f0f0;
  height: 400px;
}
.mid-layer {
  background: #a0a0a0;
  margin-top: 60px;
}
.inner-item {
  background: #ffcccc;
  margin-top: 60px;
}

Without isolation, the margins of .mid-layer and .inner-item might collapse, or the parent's margin might collapse with the child's. By ensuring each container establishes a new formatting context, these overlaps are contained.

.outer-shell,
.mid-layer,
.inner-item {
  overflow: hidden; /* Triggers BFC */
}

Note that BFC containment is hierarchical. If a parent creates a BFC, it controls its direct children. If a child also creates a BFC, it becomes an independent context for its own descendants, isolating them from the grandparant's formatting rules.

Conditions to Trigger a BFC

Several CSS properties force an element to generate a new Block Formatting Context:

• overflow set to anything other than visible (e.g., hidden, auto, scroll).
• position set to absolute or fixed.
• display set to inline-block, table-cell, flex, or grid.
• float set to anything other than none.

Interestingly, applying float to the parent container itself can resolve height collapse. If the parent floats alongside its children, it escapes the normal flow similarly, causing it to expand around its floated descendants without needing explicit clearing properties.