Float, Clear & Legacy Display

Master magazine-style text wrapping and understand the crucial difference between hiding an element versus removing it entirely.

CSS5 min readConcept 18 of 43

What it is

Before Flexbox and Grid existed, developers used the float property to build entire website layouts. Today, float has returned to its original, intended purpose: making text wrap around an image (like a magazine article).

We also use legacy display properties like display: none (which completely removes an element from the layout) and visibility: hidden (which hides the element but leaves a gaping hole where it used to be).

Why it matters

Even though we don't build full layouts with floats anymore, you will inevitably inherit older codebases that do. Furthermore, float is still the *only* way to achieve genuine text-wrapping around an object. Understanding how to 'clear' a float is essential to prevent layouts from breaking.

How it works

1. **Float**: Applying float: left pushes an element to the left edge of its container, and forces inline elements (like text) to wrap around its right side.

2. **Clear**: If you want a specific element to drop *below* the floated object rather than wrapping around it, you apply clear: left (or clear: both).

3. **Display None**: display: none turns the element off completely. The browser acts as if it doesn't exist.

4. **Visibility Hidden**: visibility: hidden makes the element invisible, but it still takes up its exact physical dimensions on the page.

Try it

Examine how the text wraps around the floated image. Then, compare what happens to the layout when a block is set to display: none versus visibility: hidden.

Float & Legacy Display

Image Float

Image floated left. Text wraps around right side.

Middle Paragraph

Rendered normally in the document flow.

/* 1. The Floated Image */
.magazine-image {
float: left;
margin: 12px;
}
 
/* 2. Legacy Hiding Methods */
.middle-paragraph {
display: block;
}

Before modern layout engines like Flexbox and Grid, CSS heavily relied on the float property. Originally intended strictly for wrapping text around images (like a newspaper article), developers hijacked it to build entire page structures.

This is the middle paragraph. Toggle the controls above to either hide it (leaving a gap) or completely remove it (collapsing the space).

When an element is set to display: none, it is as if the browser deleted the HTML node—everything below it shifts up. When set to visibility: hidden, the layout engine still calculates its exact width and height, preserving the empty space. Notice how this text flows smoothly around the image regardless of the middle paragraph's state, as long as the image is floated!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What was the original, intended purpose of the `float` property in CSS?
  2. 2What happens to a parent container if all of its children are set to `float: left`?
  3. 3What is the primary difference between `display: none` and `visibility: hidden`?

Remember this

  • float pushes an element left/right and wraps text around it.
  • clear: both forces an element to drop below all floated items.
  • A parent containing only floated children will collapse to zero height.
  • display: none removes the element entirely.
  • visibility: hidden hides the element but leaves a physical empty space.

Done with this concept?

Mark it complete to track your progress. No login needed.