html
/

CSS Float

Last Sync: Today

On this page

12
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Float

What is Float?

The float property is used to position elements to the left or right, allowing text and inline elements to wrap around them.

Basic Float

CSSRead-only
1
img {
  float: left;
}

Float Values

ValueDescription
leftFloat element to left
rightFloat element to right
noneDefault (no float)

Text Wrapping Example

CSSRead-only
1
img {
  float: right;
  margin: 10px;
}

Clear Property

The clear property specifies which sides of floating elements are not allowed to float.

CSSRead-only
1
div {
  clear: both;
}

Clear Values

ValueDescription
leftClears left floats
rightClears right floats
bothClears both sides
noneDefault

Float Layout Example

CSSRead-only
1
.box {
  float: left;
  width: 50%;
}

Clearing Float (Fix Layout)

CSSRead-only
1
.container::after {
  content: "";
  display: block;
  clear: both;
}

Modern Alternative

Float is mostly replaced by Flexbox and Grid for layout design.

Best Practices

  • Use float mainly for text wrapping
  • Use clear to avoid layout issues
  • Prefer Flexbox/Grid for layouts
  • Use clearfix for containers

Common Mistakes

  • Not clearing floats causing layout break
  • Using float for full layouts unnecessarily
  • Ignoring clearfix techniques
  • Overlapping elements due to float misuse

Conclusion

CSS float is useful for text wrapping and simple layouts, but modern CSS techniques like Flexbox and Grid are preferred for complex layouts.

Try it yourself

img {
  float: left;
  margin: 10px;
}

Test Your Knowledge

Q1
of 3

Which floats element left?

A
float: right
B
float: left
C
float: both
D
float: none
Q2
of 3

Which clears floats?

A
clear
B
float
C
display
D
position
Q3
of 3

Which replaces float?

A
Flexbox
B
Grid
C
Both
D
None

Frequently Asked Questions

What does float do?

Positions element left or right with text wrapping.

What is clear?

Stops floating behavior on specified sides.

Is float still used?

Mostly for text wrapping, not layouts.

Previous

css position

Next

css overflow

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.