How elements float in HTML?

HTML Web Development Front End Technology

We can float elements with CSS float property to either the left or right of the containing parent element. Other elements are placed around the floated content. Multiple elements with same value of float property enabled are all placed adjacently.

Float Left

In this example, the image is placed on the left using the float property with the value left. To set the right margins properly, we have set it using the margin-right property −

img {
   float: left;
   margin-right:20px;
}

Example

Let us see an example to float elements to the left −

<!DOCTYPE html>
<html>
<head>
   <style>
      img {
         float: left;
         margin-right:20px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>In this example, the image will float to the left in the text, and the text in the paragraph will wrap around the image.</p>
   <p><img src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" alt="SQL">
   SQL is a database computer language designed for the retrieval and management of data in a relational databases like MySQL, MS Access, SQL Server, Oracle, Sybase, Informix, Postgres etc. SQL stands for Structured Query Language. SQL was developed in the 1970s by IBM Computer Scientists.</p>
</body>
</html>

Float Right

In this example, the image is placed on the right using the float property with the value right. To set the left margins properly, we have set it using the margin-left property −

img {
   float: right;
   margin-left:20px;
}

Example

Let us see the example to float elements to the right −

<!DOCTYPE html>
<html>
<head>
   <style>
      img {
         float: right;
         margin-left:20px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>In this example, the image will float to the left in the text, and the text in the paragraph will wrap around the image.</p>

   <p><img src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" alt="SQL">
   SQL is a database computer language designed for the retrieval and management of data in a relational databases like MySQL, MS Access, SQL Server, Oracle, Sybase, Informix, Postgres etc. SQL stands for Structured Query Language. SQL was developed in the 1970s by IBM Computer Scientists.</p>
</body>
</html>

Float Left and Right

In this example, we have shown how to work with the CSS Float property. Here, the <button> element is set on the left or right using the left and right value of the float property. We have set a flex. The initial flex-items are set to the center using the align-items property −

Example

<!DOCTYPE html>
<html>
<head>
   <title>CSS Float</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      #container {
         display: flex;
         flex-direction: column-reverse;
         justify-content: center;
         align-items: center;
      }
      .child{
         height: 40px;
         width: 40px;
         color: white;
         border: 4px solid black;
      }
      .orange{
         background-color: #FF8A00;
      }
      .red{
         background-color: #F44336;
      }
      .violet{
         background-color: #C303C3;
      }
      .green{
         background-color: #4CAF50;
      }
      .blue{
         background-color: #03A9F4;
      }
      .yellow{
         background-color: #FEDC11;
      }
      #left{
         display: flex;
         float: left;
      }
      #right{
         display: flex;
         float: right;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS-Float</legend>
         <div id="container">
            <div class="child orange"></div><div class="child red"></div><div class="child violet"></div><div class="child green"></div><div class="child blue"></div><div class="child yellow"></div>
            </div><br>
            <input type="button" value="float-->left" onclick="floatDecider('left')">
            <input type="button" value="float-->right" onclick="floatDecider('right')">
         <div><div id="left"></div><div id="right"></div></div>
      </fieldset>
   </form>
   <script>
      var left = document.getElementById('left');
      var right = document.getElementById('right');
      function floatDecider(direction){
         var allChildren = document.getElementsByClassName('child');
         if(direction === 'left')
         left.insertAdjacentElement('beforeend',allChildren[0]);
         else
         right.insertAdjacentElement('afterbegin',allChildren[0]);
      }
   </script>
</body>
</html>

AmitDiwan

Updated on: 15-Nov-2023

292 Views

Kickstart Your Career

Get certified by completing the course

Get Started