Review

All about css float

This article explain the behaviour of CSS float property. I like this article because it compare float with other CSS layout properties, but it is an old post from 2008.

Auto reflow

Float can reflow after resize (Push the adjacent element automatically). If use position: absolute;, the resized element may cover adjacent elements.

Three clear float solutions

  • The Empty Div Method:
    • Add an empty div with clear: both;
  • The overflow method:
    • If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats
  • The Easy Clearing Method:
    • Use the following CSS (also used by bootstrap 3)
      1
      2
      3
      4
      5
      6
      7
      .clearfix:after {
         content: ".";
         visibility: hidden;
         display: block;
         height: 0;
         clear: both;
      }

Problems with floats

  • Push down
    • The image overflow from parent and push the adjacent elements downward.

Reference