CSS Float and Clear property

CSS Float Property :

The CSS float property is used to specify how an element should float on a web page and wrap around left or right side from another element. It is mainly used for positioning of images and layouts. A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at extreme left or extreme right. The elements after the floating element will flow around it. If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.

The float property can have the following possible values :

left : float the element to the left
right : float the element to the right
initial : sets the property to its initial value
inherit : inherit the property from its parents
none : the element is not floated

Now lets see an example :
<html>
<body>
  <p>What is computer? Explain in Brief.</p>
  <p>
    <img src="computer.jpg">
    A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </p>
</body>
</html>
Output :

What is computer? Explain in Brief.

A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

Now at above example, we are going to use the float property in the<img> element.
<html>
<head>
  <style> 
    img {
      float: right;
      width: 150px;
      height: 125px;
    }
  </style>
</head>
<body>
  <p>What is computer? Explain in Brief.</p>
  <p>
    <img src="computer.jpg">
    A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.
  </p>
</body>
</html>
Output :

What is computer? Explain in Brief.

A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.


CSS Clear Property :

The clear property is used to specify what elements should float beside the cleared element and on which side. It basically clean the floating left or right side or may be both side wrap area, so that the next element should start in next new line. The possible values of clear property are left, right and both. Now lets see an example :
<html>
<head>
  <style> 
    .div1 {
      float: left;
      border: 2px solid blue;
      background-color: orange;
      padding: 20px;
      margin: 10px;
    }
    .div2 {
      border: 2px solid;
    }
  </style>
</head>
<body>
  <div class="div1">Floating Text</div>
  <div class="div2">This is a test Paragraph for testing the clear property in CSS. The clear property 
    is used to specify what elements should float beside the cleared element and on 
    which side.</div>
</body>
</html>
Output :

Floating Text
This is a test Paragraph for testing the clear property in CSS. The clear property is used to specify what elements should float beside the cleared element and on which side.

At above example the text from both <div> will overlap each other. now by using the clear property we can rearrange the both <div>.
<html>
<head>
  <style> 
    .div1 {
      float: left;
      border: 2px solid blue;
      background-color: orange;
      padding: 20px;
      margin: 10px;
    }
    .div2 {
      border: 2px solid;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="div1">Floating Text</div>
  <div class="div2">This is a test Paragraph for testing the clear property in CSS. The clear property 
    is used to specify what elements should float beside the cleared element and on 
    which side.</div>
</body>
</html>
Output :

Floating Text
This is a test Paragraph for testing the clear property in CSS. The clear property is used to specify what elements should float beside the cleared element and on which side.


Next Topic :