PUBLISHED ON: APRIL 3, 2021
CSS float Property
The float property in CSS is identified for placing a particular element on the right or left side of the container, which allows text and inline elements to get wrapped around it. Hence, the element is removed from the normal flow of the page. A flowing element is the one where the computed value of float is none.
Syntax
left | right | none | inline-start | inline-end
Example 1: CSS float Property
Here in the example below, we are using the float property with different border styles, colors, and different values. In this case, we have given the float property value as left and right.
<!DOCTYPE html>
<html>
<head>
<title>The float property in CSS</title>
<style type="text/css">
section {
border: 1px solid blue;
width: 100%;
float: left;
}
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: pink;
}
.right {
float: right;
background: cyan;
}
</style>
</head>
<body>
<section>
<div class="left">1</div>
<div class="left">2</div>
<div class="right">3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>
</body>
</html>
Output
Example 2: CSS float Property
In the example below, we are using the float property with different border styles, colors and their different values. In this case, we have given the float property value as none.
<!DOCTYPE html>
<html>
<head>
<title>The float property in CSS</title>
<style type="text/css">
section {
border: 1px solid purple;
width: 100%;
float: none;
}
div {
margin: 5px;
width: 50px;
height: 50px;
}
.left {
float: none;
background: green;
}
.right {
float: none;
background: red;
}
</style>
</head>
<body>
<section>
<div class="none">1</div>
<div class="none">2</div>
<div class="none">3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>
</body>
</html>
Conclusion
Live example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
7 |
7 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the float property is none. This property is applicable to all the elements but still has no effect in case the value of display is 'none'. It is not an inherited property. The computed value for this property is the as specified one.
