float
Anonymous contributor
Published Jul 22, 2021Updated Dec 8, 2023
Contribute to Docs
The float property places an element on the left or right side of its container.
Syntax
float: value;
The following can be the value
of the float
property:
right
: The element floats on the right side of its container.left
: The element floats on the left side of its container.none
: This is the default value of thefloat
property. It ensures the element will not float left or right.
Example
This example makes an img
element float to the left of its container.
.container {height: 200px;width: 200px;border: 5px dashed #3a10e5;}.container img {float: left;}
This results in the following output:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours