Understand CSS Float Property own Way

Understanding CSS float property is not so tough. Two property:value pair float:left, float:right are commonly used to align an element left or right to other elements. But here we’re going to work on variety of situations where float property can produce excellent result. So this tutorial might glimpse a new light in your knowledge of CSS and thus help you understand CSS float property in your own way.

Values of CSS float

Let’s see at a glance, what are float values with what they do mean:

• Left: float:left is used to make an element float left to its container.
• Right: float:right is used to make an element float rihgt to its container.
• None: When float:none is used, the related element does not float but is displayed where it is. It is default.
• Inherit: When float:inherit is used, the element inherits the container’s float value.

Let’s clarify–

How does CSS float property work?

The most common use of CSS float property is aligning an image left or right of some text.

Suppose, in a div, there is an image (first) and some text (next). Now with float property, you can align the image before or after the text separately, left to the text and right to the text. See below:

<div style="border:4px solid black;width:60%;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/01/CHINAROSE-1.jpg" 
width="150" 
height="150"
style="float:none">
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here.
 Some text go here. Some text go here. 
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here. 
Some text go here. Some text go here. 
</div>

Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here.

<div style="border:4px solid black;width:60%;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/01/CHINA-ROSE-1.jpg" 
width="150" 
height="150"
style="float:left">
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here.
 Some text go here. Some text go here. 
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here. 
Some text go here. Some text go here. 
</div>

Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here.

<div style="border:4px solid black;width:60%;"> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/01/CHINA-ROSE-1.jpg" 
width="150" 
height="150"
style="float:right;">
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here.
 Some text go here. Some text go here. 
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here. Some text go here. 
Some text go here. Some text go here. 
Some text go here. Some text go here. 
</div>

Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here. Some text go here.

Default is float:none. This means you needn’t use it to any element anywhere but you should/must use it to escape floating. Suppose, you are working with an element, whose Container or Parent element has a float:right value predefined. You like to avoid influence of this value. In other word, you don’t like your element float on right. Here you can use float:none.

Use float:inherit if you like to ensure that your element take the float value of its parent or container element.

Hope you acquired a bright understanding of use of CSS float property.

The property that essentially comes just after float is clear property. This is our Clear tutorial; read up in 3 to 4 minutes-