Introduction to CSS Float Right
Float property of CSS allows the texts and inline elements to wrap around it either on the left or right side of the element. This float property of CSS forces the layout elements to float inside the parent element along with which other elements wrap around it. This property usually makes the element to float either left, right, none or inherit. The float property of CSS is used in placing an image or any layout element inside the container along with the inline elements that will wrap around it. This property is not used for designing any elements layout but instead, it is just used for wrapping text around images.
How does CSS Float Right work?
In CSS, float right property is usually used for specifying the elements that should float and these elements float around it. To avoid this or to clearfix this we use clear property. Let us see the below syntax for this float right property.
Syntax:
Float: none | left | right | initial | inherit;- none: where elements do not float.
- left: elements float to the left side of the container.
- right: elements float to the right side of the container.
- initial: this sets its value as a default value.
- inherit: it inherits the value from the parent element.
Examples to Implement CSS Float Right
Below shows the use of float: right and float: left properties in one single program.
Examples #1
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Training </title>
<style>
section {
border: 3px solid black;
width: 80%;
float: left;
}
div {
margin: 7px;
width: 80px;
height: 200px;
}
.left {
float: left;
background: red;
}
.right {
float: right;
background: blue;
}
</style>
</head>
<body>
<h1>The CSS float Property</h1>
<section>
<div class="left">1</div>
<div class="left">2</div>
<div class="right">3</div>
<p> EDUCBA is an online training provider which offers you training programs or courses across any field which you wish to learn and excel on. Here are few features about EDUCBA which will help you to build & enhance your skills: 1700+ courses across 10+ verticals. Professional Training to grow your career. </p>
</section>
</body>
</html>Output:
In the above program, we see that we are using both float property such as float: right which has the color as “blue” and float: left has the color as “red” and the text is at the center because there are float elements at both the sides of the element and hence the text is wrapped in it.
Examples #2
Code:
Float is CSS positioning property which used for wrapping the texts around images that are used to create entire web layouts. To clear this float we have another property called as clear which also takes 4 different values such as both, left, right, and none. Right
Let us see an example of float right property for CSS:
Syntax:
float: right;Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Training </title>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h1>The CSS float Property</h1>
<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:150px;height:200px;margin-right:18px;">
The pineapple is a tropical plant with an edible fruit, also called a pineapple, and the most economically significant plant in the family Bromeliaceae. The pineapple is indigenous to South America, where it has been cultivated for many centuries. </p>
</body>
</html>Output:
In the above program, we can see that we have demonstrated the float: right property where the text in the above screenshot is wrapped with the image at the right side of the element layout.
Examples #3
Code:
This clear property is used to clear the floating texts as specified. This property, when applied to any floating element the bottom part of the margin edge, is moved below the margin edge of all relevant floats. This property has 4 values such as right, left, none, and, both values. Now let us how we can clear these floating elements using clear property with examples and syntax.
Syntax:
clear: none | both | right | left;Let us how to clear the right floating elements of the layout using this clear property.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educab Training </title>
<style>
.wrapper{
border:3px solid black;
padding:8px;
}
.right {
border: 5px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: grey;
color: blue;
width:30%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<h1>The float Property</h1>
<div class="wrapper">
<p class="black">EDUCBA is an online training provider, teaches you real world skill on everything from Investment Banking to Programming to Project Management to Design & many more.</p>
<p class="red">EDUCBA is a leading global provider of skill based online education. It offers amazing 1700+ courses across 10+ verticals prepared by top notch professionals from the industry which are job oriented skill based programs demanded by the industry. </p>
<p class="right">This paragraph clears right side.</p>
</div>
</body>
</html>Output:
In the above program, we can see that we have cleared the text element to the right side of the element layout.
Examples #4
There is another concept known as clearfix hack which is used when floating element or say the image is taller than the container text then it overflows outside its container to avoid this we can use clearfix hack and is demonstrated below.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 4px solid black;
padding: 5px;
}
.img1
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<h1>The Clearfix Hack</h1>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
The pineapple is a tropical plant with an edible fruit, also called a pineapple, and the most economically significant plant in the family Bromeliaceae.</div>
<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
The pineapple is a tropical plant with an edible fruit, also called a pineapple, and the most economically significant plant in the family Bromeliaceae.</div>
</body>
</html>Output:
In the above program, we can see that in the first image is taller than the texts so to make it fit inside the container then using “clearfix hack” we clear both floating elements and display it as in table.
Conclusion
In this article, we conclude that the CSS float right concept which is used for wrapping the text around the image at right. This float property has different values like left, right, none, initial and inherit. But we have discussed on the float: right. There is another property called “clear” which is used to clear these floating elements and this also, in turn, has 4 different values such as none, both, left and right. There is another property known as clearfix hack which is used when the image is taller than the text where it overflows when wrapping the text.
Recommended Articles
This is a guide to CSS Float Right. Here we discuss an introduction to CSS Float Right, how does it works with programming examples. You can also go through our other related articles to learn more –
