How to style float elements in CSS?

Floating elements in CSS

We have learnt many properties of CSS in previous posts and now we are at a position to understand “How to float elements in CSS“. The float property of CSS makes an element to align it left or to the right which means, the elements align their selves only in horizontal direction. It applies only to the elements that generates boxes. Any element which follows floated element, flows around the floated element in other direction.

The float properties may have three following values:

  • left: It makes an element to float to the left side of a containing block.
  • right: It makes an element to float to the right side of a containing block.
  • none: It removes the float property applied earlier.

How elements actually floats?

An element which flows normally is taken up and shifted to the left or to the right as far as the space is available in containing block. Elements are floated horizontally, which means that an element can only be floated left or right, not up or down. If some floating elements are placed adjacent to each other, they will float next to each other if there is horizontal room. If there is not enough room for the float, it is shifted downward until either it fits or there are no more floating elements present. Let us write code for left and right float.

left float

#picture{
        float:left;
}

right float

#picture{
        float:right;
}

How to make float stop by using clear property?

Once the elements are set as float left or right, they will place themselves in horizontal direction. Now, if another element is placed in second line, then there may be a condition in which the floated elements are overlapping to the second line elements. To remove overlapping of these elements, you can use the clear property in CSS. If an overlapping element is floated left then clear will be written as clear:left and if floating element is floated right then clear will be written as clear:right.

Code for clear

#remove{
        clear:left;
        clear:right;
}

You can use clear:left of clear:right depending upon how the floating element is placed. This property can clear an element only from floated boxes within the same block. It doesn’t clear the element from floated child boxes within the element itself.

Let us take an example of code which shows two left float boxes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Two left Float properties</title>
    <style>
        * {
            box-sizing: border-box;
          }
        .container {
            width: 700px;
            border: 3px solid purple;
            background-color: rgb(250, 226, 205);        
        }
        .item {
            border: 3px solid grey;
            margin: 12px 3px;
            padding: 12px 3px;
        }
        #mango {
            float: left;
            width: 30%;
	    background-image:url("D:/Programming Tutorial/mango.jpg");
	    background-position:center;
	    color:white;
        }
        #apple {
            float: left;
            width: 30%;
	    background-image:url("D:/Programming Tutorial/apple.jpg");
	    background-position:center;
	    color:white;
        }
        p, h3 {
          
            text-align: justify;
        }
        h1 {
            margin: 23px auto;
            width: 455px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to my shop</h1>
        <div id="mango" class="item">
            <h3>Mango</h3>
            <p>A mango is a stone fruit produced from numerous species of tropical trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible fruit. 
	    Most of these species are found in nature as wild mangoes. 
	    The genus belongs to the cashew family Anacardiaceae.</p>
        </div>
        <div id="apple" class="item">
            <h3>Apple</h3>
            <p>An apple is an edible fruit produced by an apple tree (Malus domestica). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus</p>
        </div>
    </div>
</body>
</html>
float left in css, www.programmingtutorial.in

The above image clearly shows two left float boxes aligned to the left with respect to the containing box.

Let us take an example of code which shows one left float box and one right float box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Left and right Float properties</title>
    <style>
        * {
            box-sizing: border-box;
          }
        .container {
            width: 700px;
            border: 3px solid purple;
            background-color: rgb(250, 226, 205);      
        }
        .item {
            border: 3px solid grey;
            margin: 12px 3px;
            padding: 12px 3px;
        }
        #mango {
            float: left;
            width: 30%;
	    background-image:url("D:/Programming Tutorial/mango.jpg");
	    background-position:center;
	    color:white;
        }
        #apple {
            float: right;
            width: 30%;
	    background-image:url("D:/Programming Tutorial/apple.jpg");
	    background-position:center;
	    color:white;
        }
        p, h3 {
         text-align: justify;
        }
        h1 {
            margin: 23px auto;
            width: 455px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to my shop</h1>
        <div id="mango" class="item">
            <h3>Mango</h3>
            <p>A mango is a stone fruit produced from numerous species of tropical trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible fruit. 
	    Most of these species are found in nature as wild mangoes.The genus belongs to the cashew family Anacardiaceae.</p>
        </div>
        <div id="apple" class="item">
            <h3>Apple</h3>
            <p>An apple is an edible fruit produced by an apple tree (Malus domestica). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus</p>
        </div>
    </div>
</body>
</html>

left and right float in css, www.programmingtutorial.in

The third example of code which shows two right float boxes is shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float properties</title>
    <style>
        * {
            box-sizing: border-box;
          }
        .container {
            width: 700px;
            border: 3px solid purple;
            background-color: rgb(250, 226, 205); 
        }
        .item {
            border: 3px solid grey;
            margin: 12px 3px;
            padding: 12px 3px;
        }
        #mango {
            float: right;
            width: 30%;
	    background-image:url("D:/Programming Tutorial/mango.jpg");
	    background-position:center;
	    color:white;
        }
#apple {
            float: right;
            width: 30%;
	    background-image:url("D:/Programming Tutorial/apple.jpg");
	    background-position:center;
	    color:white;
        }
        p, h3 {
          text-align: justify;
        }
        h1 {
            margin: 23px auto;
            width: 455px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to my shop</h1>
        <div id="mango" class="item">
            <h3>Mango</h3>
            <p>A mango is a stone fruit produced from numerous species of tropical trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible fruit. 
	    Most of these species are found in nature as wild mangoes. The genus belongs to the cashew family Anacardiaceae.</p>
        </div>
        <div id="apple" class="item">
            <h3>Apple</h3>
            <p>An apple is an edible fruit produced by an apple tree (Malus domestica). Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus</p>
        </div>
    </div>
</body>
</html>
float right in css, www.programmingtutorial.in