0

Why float elements make their parent container height 0px

author
pranav m
medium
0
33


Answer

That happens because of how CSS floats work:

  • When you set an element to float: left or float: right, it is taken out of the normal document flow.
  • The parent container only expands its height based on elements in the normal flow. Since floated children are no longer in that flow, the parent "doesn’t see" them when calculating height.
  • As a result, if the parent has no non-floated content (or explicit height), its height collapses to 0px.

How to fix it (contain floats):

.parent::after {
content: "";
display: block;
clear: both;
}

Click to Reveal Answer

Tap anywhere to see the solution

Revealed

Comments0
    Why float elements make their parent container height 0px - float, css3 | EBAT