Floating All Children on a Parent

When floating all children in a parent element, the children no longer contribute to parent’s height making the parent’s height 0. That means a background color won’t show behind those elements nor will a border show around them. 

<div class=“zombie-nest”>
    <div id=“fred” class=“zombie”></div>
    <div id=“keesha” class=“zombie”></div>
</div>Code language: HTML, XML (xml)

.zombie-nest { 
    background-color: chartreuse; 
    border: red 1px solid; 
}
#fred { 
    height: 100px; 
    width: 100px; 
    float: left; 
    background-color: peachpuff;
}
#keesha { 
    height: 100px; 
    width: 100px; 
    float: right; 
    background-color: orchid;
}Code language: CSS (css)

Use the overflow property to make those floated child elements contribute to the height again. Just about any value besides the default (auto) should work, but I tend to like hidden, particularly if I don’t need the floated elements to show outside the parent.

.zombie-nest { 
    overflow: hidden; 
}Code language: CSS (css)