Float property allows text to float and move an element to one side of the sreen based on its property which could be either:

An illustration of floating elements is here to try out:

Here is the code of the HTML and embedded CSS style sheets:
<title> Floating </title>
<style type="text/css">
body {font-family: arial, sans-serif;} h2 {font-family: arial, sans-serif; text-decoration: underline; margin-top:0px;} p {font-family: calibri; background-color:red; font-size: large; margin-bottom: 1em;} .tofloat {background-color: yellow; font-family: calibri; font-size: 3em; padding: 0.1em; float: right; text-align: right; width: "30";} img {float:right; } </style>
<h2 class="tofloat"> Illustrations of the flowting property in CSS3 </h2>
<p> This is an example of how the float property could be used in web development and Cascading style sheets.
The properties used here include background-color (yellow), font family (calibri),
font size (3em), padding (0.5em), float (right), text align (right), and the width (30).
<p> <img src="..\Pictures/Bear.jpg" alt="Bear" style="width:100px;height:150px;">
This picture is now floated to the right of the screen, and the text is being wrapped up to its side.
The picture shows a bear living peacfully in its enviroment and enjoying sitting below a nice and beautiful tree.

If the picture is available, the rendered document looks like this:

Try different browser to see the difference.

For more details, please contact me here.
Date of last modification: 2020.