For working professionals
For fresh graduates
More
1. Introduction
6. PyTorch
9. AI Tutorial
10. Airflow Tutorial
11. Android Studio
12. Android Tutorial
13. Animation CSS
16. Apex Tutorial
17. App Tutorial
18. Appium Tutorial
21. Armstrong Number
22. ASP Full Form
23. AutoCAD Tutorial
27. Belady's Anomaly
30. Bipartite Graph
35. Button CSS
39. Cobol Tutorial
46. CSS Border
47. CSS Colors
48. CSS Flexbox
49. CSS Float
51. CSS Full Form
52. CSS Gradient
53. CSS Margin
54. CSS nth Child
55. CSS Syntax
56. CSS Tables
57. CSS Tricks
58. CSS Variables
61. Dart Tutorial
63. DCL
65. DES Algorithm
83. Dot Net Tutorial
86. ES6 Tutorial
91. Flutter Basics
92. Flutter Tutorial
95. Golang Tutorial
96. Graphql Tutorial
100. Hive Tutorial
103. Install Bootstrap
107. Install SASS
109. IPv 4 address
110. JCL Programming
111. JQ Tutorial
112. JSON Tutorial
113. JSP Tutorial
114. Junit Tutorial
115. Kadanes Algorithm
116. Kafka Tutorial
117. Knapsack Problem
118. Kth Smallest Element
119. Laravel Tutorial
122. Linear Gradient CSS
129. Memory Hierarchy
133. Mockito tutorial
134. Modem vs Router
135. Mulesoft Tutorial
136. Network Devices
138. Next JS Tutorial
139. Nginx Tutorial
141. Octal to Decimal
142. OLAP Operations
143. Opacity CSS
144. OSI Model
145. CSS Overflow
146. Padding in CSS
148. Perl scripting
149. Phases of Compiler
150. Placeholder CSS
153. Powershell Tutorial
158. Pyspark Tutorial
161. Quality of Service
162. R Language Tutorial
164. RabbitMQ Tutorial
165. Redis Tutorial
166. Redux in React
167. Regex Tutorial
170. Routing Protocols
171. Ruby On Rails
172. Ruby tutorial
173. Scala Tutorial
175. Shadow CSS
178. Snowflake Tutorial
179. Socket Programming
180. Solidity Tutorial
181. SonarQube in Java
182. Spark Tutorial
189. TCP 3 Way Handshake
190. TensorFlow Tutorial
191. Threaded Binary Tree
196. Types of Queue
197. TypeScript Tutorial
198. UDP Protocol
202. Verilog Tutorial
204. Void Pointer
205. Vue JS Tutorial
206. Weak Entity Set
207. What is Bandwidth?
208. What is Big Data
209. Checksum
211. What is Ethernet
214. What is ROM?
216. WPF Tutorial
217. Wireshark Tutorial
218. XML Tutorial
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!
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.
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.
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>
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:
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>
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>
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.
Floating elements are commonly used for creating text wrapping around images, creating multi-column layouts, and positioning elements in specific arrangements within their containers.
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.
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.
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.
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.
Author
Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.
2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.