Codectionary / Developer documentation / CSS

float and clear

float was CSS's original tool for wrapping text around an image or building multi-column layouts, pulling an element to one side while other content flows around it. clear stops an element from wrapping around floated siblings. Flexbox and Grid have replaced float for layout purposes, but float is still legitimately used for wrapping text around images.

Syntax

float: left | right | none;
clear: left | right | both;

Examples

Wrapping Text Around an Image

The use case float remains genuinely good for today.

/* Demo setup: sizing, structure or neutral surfaces. */
.inline-photo{float:left;width:160px;margin:0 1rem 1rem 0}.footer{background:#fef3c7;color:#422006;padding:1rem}

img.inline-photo {
  float: left;
  margin: 0 16px 8px 0;
  width: 200px;
}
/* Paragraph text will wrap around the right and bottom of the image */
  1. The image is an original self-contained SVG, so the wrapping example does not depend on a missing download.
  2. The float permits text to flow alongside its box.
  3. The clear rule, when present, moves the footer below floats rather than allowing it to continue beside them.
HTML used by this example
<img class="inline-photo" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="A sun above green and purple mountains"><p>Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. </p><footer class="footer">Footer after the float</footer>

clear to Stop Wrapping

Preventing an element from sitting beside a float.

/* Demo setup: sizing, structure or neutral surfaces. */
.inline-photo{float:left;width:160px;margin:0 1rem 1rem 0}.footer{background:#fef3c7;color:#422006;padding:1rem}

.footer {
  clear: both; /* moves below any floated elements, regardless of side */
}
  1. The image is an original self-contained SVG, so the wrapping example does not depend on a missing download.
  2. The float permits text to flow alongside its box.
  3. The clear rule, when present, moves the footer below floats rather than allowing it to continue beside them.
HTML used by this example
<img class="inline-photo" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23e0f2fe%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%2255%22%20r%3D%2230%22%20fill%3D%22%23fbbf24%22%2F%3E%3Cpath%20d%3D%22M0%20240%20135%2055%20280%20240%22%20fill%3D%22%230f766e%22%2F%3E%3Cpath%20d%3D%22m150%20240%20155-150%20175%20150%22%20fill%3D%22%235b21b6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22218%22%20fill%3D%22white%22%20font-size%3D%2224%22%20font-family%3D%22sans-serif%22%3EOriginal%20landscape%3C%2Ftext%3E%3C%2Fsvg%3E" alt="A sun above green and purple mountains"><p>Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. Text wraps beside the landscape while there is space, then continues below it. </p><footer class="footer">Footer after the float</footer>

Parameters and values

  • float (left | right | none): Pulls an element to one side, letting content wrap around it
  • clear (left | right | both | none): Prevents an element from sitting beside floated elements

Best practices

  • Use Flexbox or Grid instead of float for building page layouts and component structure - that is what they were designed to replace
  • Reserve float genuinely for wrapping text around an image or similar inline content, which is still its best use case today
  • Remember a floated element is taken out of normal flow, which can cause its parent to collapse to zero height unless cleared or given overflow: auto
  • Avoid float-based grid systems (common in older frameworks) in new projects - modern layout tools are simpler and more capable

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading