CSS Clearfix

CSS Clearfix

Floated Elements in Containers

  • A problem can happen when a floated element is within a container box
  • The element does not automatically adjust the container’s height to the floated element
  • When an inner element is floated, its parent no longer contains it
  • The floated element is removed from the container flow
  • You can use 2 methods to fix it
    • {clear: both;} 
    • clearfix

Clearfix Class Example

  • .clearfix:after
  • {
  •   clear: both;
  •   content: ".";
  •   display: block;
  •   height: 0;
  •   visibility: hidden;
  •   font-size: 0;
  • }

Clearfix Class Usage

  • Add the clearfix class to every container item for the floated element, e.g. float:left
  • Float the <li> elements, not the <a> elements within them
  • Review Sources documents for additional help with older versions of IE

Sources