Clearfix hack

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. The clearfix allows a container to wrap it’s floated children.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;

The clearfix is a way to combat the zero-height container problem for floated elements

Browser Support

If you don’t need to support IE9 or lower, you can use flexbox freely, and don’t need to use floated layouts. There are two other ways around..

display: inline-block /* preferred */

Flexbox – Best (limited browser support) Detailed browser list

Leave a Reply