Use this analogy to help students understand float and clear in CSS.

  • Floats are one of the harder CSS topics to learn.
  • When teaching about floating elements, compare it to a person who gets out of line in the grocery store.
    • When he gets out of line everyone around him responds by moving up to replace his spot.
    • When he tries to get back in line he has to force his way back in causing everyone to bunch up around him or "float" around him.
      • This helps students get a sense of how the positioning of the elements can get messed up.
    • To prevent elements from crowding or "floating" around the person who is trying to get back in line you need to introduce the clear guy. He comes in and wants nothing to do with what just happened so he makes room for the person to come back in line and stands behind him forcing the normal flow of the line.

More about this tip

External Source

Interview with Corina Acosta