Skip to content
Learn Netverks

Lesson

Step 16/36 44% through track

float-spacing

Float and spacing helpers

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
beginner

This lesson

This lesson teaches Float and spacing helpers—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Float and spacing helpers in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Float and spacing helpers in your own words.

Foundation still ships float helpers (float-left, float-right, clearfix) for legacy patterns and media wraps, but new layout work should default to flex via the XY grid.

Spacing scale

  • margin-top-1, padding-horizontal-2 — numbered scale from settings
  • margin-0, padding-0 — reset helpers
  • Directional variants: margin-bottom-2, padding-top-3

Spacing helpers complement—not replace—gutters from grid-margin-x. Compare numbered scales with Bootstrap spacing utilities; Foundation’s indices map to rem values in Sass.

Self-check

  1. Why prefer grid gutters over stacking margin-left-* on every cell?
  2. When might float-right still appear in legacy Foundation sites?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • Still using float utilities?
  • Margin helper choice?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump