Learn About Various Techniques for Clearing Floats and Example ?

Various techniques for clearing floats
Clearing floats is also known as clear fixing. It basically forces the containing element to expand to contain its child elements. Thus, forces the subsequent elements to appear below it. There are many methods and techniques for clearing floats but firstly I define clear property.
The clear CSS property indicates that weather an element can be next to floating elements that precede it or must be cleared or moved down below them.Following are some techniques for clearing floats.
Technique 1:
 The Old School way :
The real old school method involves the use of tables for the specific layout in which clearing floats means nothing. We consider this method as far as the existence of floats goes.
The idea is so simple like insert an element having the clear property which is declared on it at
the bottom of the container of floated elements.  The structure of classic CSS is as follows:
.clear
 {
    clear : both;
}
And this HTML looks like as following:
<div class= “container”>
<div class= “el-1”>I’m floated . . . </div>
<div class= “el-2”>I’m also floated…</div>
<br class= “clear”>
</div>
<div class= “main”>
Bravo, sirs and madam. I’m clear.
</div>

Technique 2: 
The Overflow way:
By using the property of overflow on our .container we can force the container to expand to the
actual height of the floated elements. The CSS is looks like following:
.container
{
Overflow: hidden; /*can also be “auto” */
}
And the HTML would remain the same as it is original having no extra elements.

Technique 3:
 The “clear fix” class:
Clearfix means fixing the clearing of floats. .clearfix can apply to any float-containing element in our class. This will force the container element to expand by pushing subsequent elements beneath it. This uses CSS pseudo-elements ::before and ::after.
The CSS then looks like following:
.clearfix: before,
.clearfix: after
{
Content: “ ” ;
Display: table;
}
.clearfix: after {
Clear: both;
}
.clearfix
{
Zoom:1; /* i.e. 5/6 */
}
And the HTML then looks like following:
<div class= “container clearfix” >
<div class= “el-1” I’m floated… </div>
<div class= “el-2” I’m also floated… </div>
</div>
<div class= “main” >
Bravo, sirs and madam. I’m in the clear.
</div>

Technique 4:
The future contain-floats value:
W3C added a value to the min-height property in order to solve this problem. It looks like following:
.container
{
Min-height: contain-floats;
}
This will do the same thing as the overflow and clearfix method do but with the single line and
without any drawback.

Share on Google Plus

About bilal S

I am founder of javaHint.com and a Computer Scientist. I have studied Computer Science and currently enrolled research student .I am providing information about computer, s web Programming Languages, Architecture and All other basic information Such as Information Technology and Computer Science. For Any Query and suggestion you are always welcome to contact me.