Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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.