Is there any difference between float: none and clear: none

Question

I was doing a bit of stuff using float and clear. I found no difference using float: none; or clear: none; Is there any? can anybody illustrate the difference with an example

Answer 1

It seems like you didn't understand the underlying concept of what float does. Any value of float except none whenever assigned to a block-level element takes that element out of the document flow. Suppose you have two different div elements, one with float:none and the other with clear:none. Now the later could be either in the document flow or out of the flow of document -- depending upon its float value. I present you two examples. In the first version the Red paragraph uses float:none and in the second version the Red paragraph uses clear: none

Red paragraph using float:none:

#usefloatnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 350px;
  
  float: none;  
}

#useclearnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 200px;
  float: right;
  
  clear: none;
}

#normal 
{
  border: 1px dotted black;
  width: 1050px; height: 100px;
}

</style>

  </head>
  <p id="usefloatnone"> Red paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>
</html>

Red paragraph using clear:none:

#usefloatnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 350px;
  
  float: none;  
}

#useclearnone
{
  border: 1px dotted black;
  background-color: red;
  width: 1050px; height: 200px;
  float: right;
  
  clear: none;
}

#normal 
{
  border: 1px dotted black;
  width: 1050px; height: 100px;
}

<p id="useclearnone"> Red paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>
  <p id="normal"> Normal paragraph </p>

You can see the difference in effect while using clear: none and float: none now. I suggest you to first thoroughly understand the concept of float and clear from this tutorial by w3.org community. You use clear property upon elements when you want to clear any floating elements around/(usually left or right to) them.

Answer 2

They're two totally different things.

float will make an element align to the left or right (the parameter) inside its parent. float: none does nothing, unless the element was already floating. The float element lose it's automatically filled width, and reduce it to as small as it can get.

clear will make sure there are no floating elements on the side you tell. If there is one, it will move down until there is none in the given direction. clear: both will check this for both directions.

Here's an illustration to show you what floats and clears do.