How to fix weird behaviors of floating elements using CSS ?

Last Updated : 16 Dec, 2022

In this article, we will see the use of the floating property of CSS and fix its weird behavior. CSS float is one of the most important properties. It arranges the block element in a line “Left” or “Right” according to their size but the default value of the float is “none” ( The block element will behave as block and inline as inline).

Approach: It has mainly two properties “Left” and “Right” and other properties as “Inherit”, and “none”. These properties arrange the block-level element in a line left or right depending upon which property is used if the space is available for the content.

Syntax :

<style>
    .classname{
        float: property;
    }
</style>

Values:

Left: This property will push the content to the left of the container.
Right: This property will push the content to the right of the container.
Inherit: This property will push the content to inherit the floating value of the parent.
none: This property will push the content to follow its natural behavior.

Note: When you use it with more elements, all the elements will stack upon each other.

Example 1: In this example, we will see the implementation of float and the problem faced while using the CSS float property. There are three boxes but only two are visible because the third box is under the “Float Left” box because the “Float Left” box is floating and the “Third” box is under the “Float Left” box. This shows the weird behavior of the CSS float property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
   <title>Float</title> 
   <style> 
        .box{ 
            color: white; 
            font-size: larger; 
            text-align: center; 
            height: 50px; 
            width: 200px; 
        } 
        .green-left-box{ 
            background-color: green; 
            float: left; 
        } 
        .green-right-box{ 
            background-color: green; 
            float: right; 
        } 
        .red{ 
            background-color: red; 
        } 
   </style> 
</head> 
  
<body> 
    <h1 style="color:green;text-align:center;"> 
        GeeksforGeeks 
    </h1>  
    <div class="green-right-box box"> 
        Float right 
    </div> 
    <div class="green-left-box box"> 
        Float Left 
    </div> 
    <div class="red box">Third Box</div> 
</body> 
</html>

Output:

Example 2: To resolve the above problem, you can use the CSS “clear” property. The clear property is used to specify which side of floating elements are not allowed to float.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
   <title>Float</title> 
   <style> 
        .box{ 
            color: white; 
            font-size: larger; 
            text-align: center; 
            height: 50px; 
            width: 200px; 
        } 
        .green-left-box{ 
            background-color: green; 
            float: left; 
        } 
        .green-right-box{ 
            background-color: green; 
            float: right; 
        } 
        .red{ 
            background-color: red; 
            clear: both; 
        } 
   </style> 
</head> 
  
<body> 
    <h1 style="color:green;text-align:center;"> 
        GeeksforGeeks 
    </h1>  
    <div class="green-right-box box"> 
        Float right 
    </div> 
    <div class="green-left-box box"> 
        Float Left 
    </div> 
    <div class="red box">3rd Box</div> 
</body> 
</html>