The elements like
- The parent div in this example will not expand to contain its floated children – it will appear to have height: 0.
How to solve this problem?
Float the parent.
Give the parent an explicit height.
Append a “spacer” element inside the parent element, like this:
Set parent to overflow: auto
- The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
- You can use 2 methods to fix it:
- use the method below to “clearfix” it.
using a clearfix class for parent element
- Add this in the parent div at the bottom