Skip to main content
D
CSS
CSS Float

CSS Float

CSS float wraps text around images and block elements.

Read Time
5 min read
Difficulty
Beginner
Last Updated
Jun 15, 2026
Version
v1.0.0

Introduction

CSS originally used float to push images to the side and let text flow around them. While flexbox replaced it for main page layouts, developers still use float for its original purpose. Floating elements removes them from the normal document flow.

Syntax

Syntax
1/* float syntax */
2img {
3  float: right;
4}

Example

Example
1/* this wraps text around an image */
2img {
3  float: left;
4  margin-right: 15px;
5}

Key Points

  • Float pushes elements to the left or right.
  • Text wraps around floated elements automatically.
  • The `clear` property stops the floating behavior below.
  • Flexbox and Grid offer better modern layout controls.

Up Next

Continue your journey with the next topic.

Go to CSS Inline-block