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

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

Float:none; tells the elements that you do not wish for it to float.
Clear tells other elements whether they should be allowed to float or not, and in the case of none, you're allowing floats on both sides. it's why when you use clear:both; that floating stops.

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.

Answer 3

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 4

Float none stops an element to stop wraping around adjacent floating child Elements. By default all, elements have float none.
Clear both stop element to wrap around any floating child from left or right side.
For more details and live examples, visit my tutorial,
http://tutorial.techaltum.com/css_float.html.