Float CSS Property

Posted By: Kanika Gupta Published: 14, Jan 2024

Float is yet another important property of CSS used for specifying the position of contents of a webpage. As the name suggests, floating an element means moving an element to the desired position while allowing other elements to wrap around it.

This property is most commonly used to wrap text around images or any inline elements including paragraph, list, button or table.

Values of float property

The most common parameters/values used for this property are

• Left
• Right
• None
• Initial

Syntax

float: value;

float: left

This property is used to position elements on the left side of the webpage.

Example:



Output:



float: right

This property is used to position elements on the left side of the webpage.

Example:



Output:




float: none

This property is used to set the floating property of an element to none. The element will not float and will be displayed according to the default value i.e. from left to right.

Example:




Output:




float: initial

This property is used to position an element to its initial value.

Example:

The element is at first floated to right.




Output:




The element is now floated to its initial value – left.




Output:

Alternatives of float

This property is no doubt handy but also leads to inconsistency; depending upon the screen size and sometimes the rendered height of the objects on which the property is used. Things get a little frustrating when float is used for responsive designing, suggesting that this property works fine for smaller cases but cannot be used to design an entire web layout.

So here are a few alternatives to help you resolve the problem.

Margin

It can be used to align a specific element to right or left by setting the margin of that side as 0 and other side as auto.
For example, to align an element to the left, we set margin-left: 0; and margin-right: auto;

Align with flex

Use of flex makes the alignment of elements more flexible. At first, display: flex; is added to the parent.
Then for left-to-right layout, flex-end is used to align elements to right and flex-start to align the elements to left. The case is opposite for right-to-left layout.

Align with grid

Blocks can be easily aligned using grids. At first, display: grid; is added to the parent.
Then we set grid-area: right; on the block to align the element to the right and grid-area: left; to align the element to the left side of the layout.

Conclusion

Float is an extremely useful property of CSS while designing a webpage and is equally handy in cases which require wrapping of text around an image. However, it fails to serve the purpose when a wider screen size or responsive designing comes into picture.

So, this property depends on the need and usage of the developer. However, there are multiple alternatives out there that serves the same purpose and even better than float, which can be used and experimented upon.