For working professionals
For fresh graduates
Study abroad
More

CSS Float

Updated on 03/03/20242,544 Views

Table of Content

Introduction

Cascading Style Sheets (CSS) is a fundamental technology for designing and styling web pages. It allows developers to control the layout and appearance of elements on a website. Float is an essential aspect of CSS. Float in CSS plays an important role in creating dynamic page layouts. The "float" property allows elements to be removed from the normal flow of the document and positioned either to the left or right of their parent container. This allows the other content to flow around them.

Through this tutorial, you will be better equipped to create attractive, responsive, and versatile web layouts. Keep reading to know more!

Overview

In this tutorial, we will delve deeper into how float works, its properties, and some CSS float examples which will help you gain a deeper understanding of CSS float.

How It Works

CSS float, a fundamental layout property, enables horizontal shifting of elements within a container, with options limited to left or right placement. This property exclusively impacts horizontal positioning, precluding any vertical floating capabilities.

Upon applying float to an element, it is extracted from the standard document flow and is maneuvered as far to the left or right as feasible within its enclosing container. Consequently, the floated element can occupy an extreme position, either leftmost or rightmost, contingent on the specified float direction.

A primary application of CSS float is evident in text-image integration. For instance, when an image is floated to the right, adjoining text gracefully envelops it on the left, yielding an aesthetically pleasing composition. Similarly, the leftward image floating prompts text to flow around the image's right side.

Notably, subsequent elements dynamically adapt their arrangement to encompass the floated element. Conversely, antecedent elements remain unperturbed, steadfastly preserving their layout without entwining around the floated element.

CSS Float Properties

clear

This property is used to remove elements after the floating elements.

left, right, both, none, inherit

float

It defines whether the box can float or not.

left, right, none, inherit

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<h2>Float Right</h2>

<p>The image will float to the right,and the text in the paragraph will wrap around the image.</p>

<p><img src="https://th.bing.com/th/id/OIP.bxPVEkbjhp9Osye5ruAffAAAAA?pid=ImgDet&rs=1" 
style="width:170px;height:170px;margin-left:15px;">
The queen of flowers, rose is very beautiful and attractive. It grows in different colours like red, white, yellow,
pink and other varieties. Small thorns on the stem protect the plant. In the world of art, poetry and literature,
rose has been glorified as a symbol of love, compassion and eternal beauty. So it is one of the most commonly used flowers when 
gifting a bouquet or decorating a space with floral arrangements. Rose also has many beneficial properties. So they are used in 
many home remedies and self-care products. Rose is also the most beautifully fragrant flower, and its essence is also used 
in many cosmetic products like creams, soaps and perfumes. Interestingly, the rose is an edible flower so it lends itself 
to several recipes like rose milk or rose lassi, or even rose flavoured candy, chocolates and mithais. Roses stand out 
amongst all other beautiful and colourful flowers.</p>

</body>
</html>

CSS Float Property Values

The CSS float property is used to specify how an element should be floated (positioned) within its containing element. It's commonly used for creating layouts, especially for creating multi-column designs or wrapping text around images. However, it's important to note that the float property is somewhat outdated and has some limitations. Modern layout techniques like Flexbox and CSS Grid are generally preferred for creating more complex layouts.

The float property has the following values:

none: The default value. The element will not float and will be displayed according to the normal flow of the document.
left: The element will be floated to the left within its containing element. Other elements will wrap around it on the right side.
right: The element will be floated to the right within its containing element. Other elements will wrap around it on the left side.
inherit: The element inherits the float value from its parent element.

It's important to understand that when an element is floated, it is taken out of the normal flow of the document, which can have unintended consequences for layout and positioning of other elements. You often need to use additional CSS techniques, such as clearfixes, to ensure that the containing element properly encloses the floated elements.

As mentioned earlier, modern layout techniques like Flexbox and CSS Grid provide more powerful and flexible ways to create layouts without some of the complications that float-based layouts can introduce.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>

<h2>Float Left</h2>

<p>The image will float to the left,and the text in the paragraph will wrap around the image.</p>

<p><img src="https://th.bing.com/th/id/OIP.bxPVEkbjhp9Osye5ruAffAAAAA?pid=ImgDet&rs=1" 
style="width:170px;height:170px;margin-left:15px;">
The queen of flowers, rose is very beautiful and attractive. It grows in different colours like red, white, yellow,
pink and other varieties. Small thorns on the stem protect the plant. In the world of art, poetry and literature,
rose has been glorified as a symbol of love, compassion and eternal beauty. So it is one of the most commonly used flowers when 
gifting a bouquet or decorating a space with floral arrangements. Rose also has many beneficial properties. So they are used in 
many home remedies and self-care products. Rose is also the most beautifully fragrant flower, and its essence is also used 
in many cosmetic products like creams, soaps and perfumes. Interestingly, the rose is an edible flower so it lends itself 
to several recipes like rose milk or rose lassi, or even rose flavoured candy, chocolates and mithais. Roses stand out 
amongst all other beautiful and colourful flowers.</p>

</body>
</html>

CSS Float Property Example:

none:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: none;
}
</style>
</head>
<body>

<h2>Float none</h2>

<p>The image will be displayed just where it occurs in the text</p>

<p><img src="https://th.bing.com/th/id/OIP.bxPVEkbjhp9Osye5ruAffAAAAA?pid=ImgDet&rs=1" 
style="width:170px;height:170px;margin-left:15px;">
The queen of flowers, rose is very beautiful and attractive. It grows in different colours like red, white, yellow,
pink and other varieties. Small thorns on the stem protect the plant. In the world of art, poetry and literature,
rose has been glorified as a symbol of love, compassion and eternal beauty. So it is one of the most commonly used flowers when 
gifting a bouquet or decorating a space with floral arrangements. Rose also has many beneficial properties. So they are used in 
many home remedies and self-care products. Rose is also the most beautifully fragrant flower, and its essence is also used 
in many cosmetic products like creams, soaps and perfumes. Interestingly, the rose is an edible flower so it lends itself 
to several recipes like rose milk or rose lassi, or even rose flavoured candy, chocolates and mithais. Roses stand out 
amongst all other beautiful and colourful flowers.</p>

</body>
</html>

Left:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>

<h2>Float Left</h2>

<p>The image will float to the left,and the text in the paragraph will wrap around the image.</p>

<p><img src="https://th.bing.com/th/id/OIP.bxPVEkbjhp9Osye5ruAffAAAAA?pid=ImgDet&rs=1" 
style="width:170px;height:170px;margin-left:15px;">
The queen of flowers, rose is very beautiful and attractive. It grows in different colours like red, white, yellow,
pink and other varieties. Small thorns on the stem protect the plant. In the world of art, poetry and literature,
rose has been glorified as a symbol of love, compassion and eternal beauty. So it is one of the most commonly used flowers when 
gifting a bouquet or decorating a space with floral arrangements. Rose also has many beneficial properties. So they are used in 
many home remedies and self-care products. Rose is also the most beautifully fragrant flower, and its essence is also used 
in many cosmetic products like creams, soaps and perfumes. Interestingly, the rose is an edible flower so it lends itself 
to several recipes like rose milk or rose lassi, or even rose flavoured candy, chocolates and mithais. Roses stand out 
amongst all other beautiful and colourful flowers.</p>

</body>
</html>

Right:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<h2>Float Right</h2>

<p>The image will float to the right,and the text in the paragraph will wrap around the image.</p>

<p><img src="https://th.bing.com/th/id/OIP.bxPVEkbjhp9Osye5ruAffAAAAA?pid=ImgDet&rs=1" 
style="width:170px;height:170px;margin-left:15px;">
The queen of flowers, rose is very beautiful and attractive. It grows in different colours like red, white, yellow,
pink and other varieties. Small thorns on the stem protect the plant. In the world of art, poetry and literature,
rose has been glorified as a symbol of love, compassion and eternal beauty. So it is one of the most commonly used flowers when 
gifting a bouquet or decorating a space with floral arrangements. Rose also has many beneficial properties. So they are used in 
many home remedies and self-care products. Rose is also the most beautifully fragrant flower, and its essence is also used 
in many cosmetic products like creams, soaps and perfumes. Interestingly, the rose is an edible flower so it lends itself 
to several recipes like rose milk or rose lassi, or even rose flavoured candy, chocolates and mithais. Roses stand out 
amongst all other beautiful and colourful flowers.</p>

</body>
</html>

inherit:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Inherit Example</title>
<style>
  .parent {
    float: left;
    width: 200px;
    background-color: lightblue;
    padding: 10px;
  }
  
  .child {
    float: inherit; /* Inherit the float value from the parent */
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    margin: 10px;
  }
</style>
</head>
<body>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
</body>
</html>

Conclusion

Thus, embracing CSS float empowers designers to develop attractive, responsive, and versatile web layouts that enhance user experience and aesthetics. CSS float is a preferred choice for web designers. If you want to delve deeper into the field of web designing, consider taking up a full-stack development course from upGrad. It is an excellent choice for students who have creative and analytical minds and want to build exciting web pages.

FAQs

What is the purpose of floating elements?

Floating elements are commonly used for creating text wrapping around images, creating multi-column layouts, and positioning elements in specific arrangements within their containers.

How can I clear the float to prevent wrapping around other elements?

To prevent other elements from wrapping around a floated element, you can use the "clear" property. By setting "clear" to "left" or "right" on an element, you force it to move below any floated elements on that side.

Is CSS float still the best option for layouts?

While CSS float has been widely used in the past, newer layout techniques like Flexbox and CSS Grid offer more control and flexibility. For complex layouts, it is recommended to use these modern methods instead of relying solely on CSS float.

What are some potential issues with using CSS float?

Using float may lead to layout problems like clear-fixing, where elements lose their height, and nested floats may cause unexpected behavior. Additionally, floated elements can sometimes be challenging to center within their containers.

Can I float non-block elements?

Yes, you can float non-block elements like images and inline elements. When floated, they will behave like block-level elements and create wrapping effects for surrounding content.