Tutorials Tonight's Logo
Follow Us

CSS FLOAT


CSS float property floats the element left or right of its container. CSS float property defines flow of content. Once float value is defined element is removed from normal flow of webpage and behaves like defined.

It is used to push HTML elements or containers left or right.

CSS Float properties

Value Description
left It pushes element to left.
right It pushes element to right.
inherit It inherit float value from parent element.
none It is default value of float.It specifies that element is not floated.


CSS float left

The element having property float:left; is pushed left to the webpage.

.box-left{
    float: left;
    width: 10vw;
    border: 1px solid silver;
    background-color: #00669950;
}
▶ Run the code

Output:

Floating Left




CSS float right

The element having property float:right; is pushed right to the webpage.

.box-right{
    float: right;
    width: 10vw;
    border: 1px solid silver;
    background-color: #00669950;
}
▶ Run the code

Output:

Floating Right




CSS clear property

CSS clear property is used to control the element which will float beside that element.

If we specify value clear: left; then no floating element will be allowed to the left side of the element.

.float-left{
    float: left;
    border: 1px solid brown;
}
.clear{
    clear: left;
    border: 1px solid silver;
}
▶ Run the code

Output:

Floating left
This div element does not allow any element to float its left side.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.