Anyone who has ever used the grid layout would know that using floats can sometimes be a pain in the a$$. So, lets explore the problems we face a bit.

The Problem with floats

The very first problem with using floats is that if all the child elements of a container are given a float value, then the parent element gets a height of ZERO.
This means that the border of the parent element will not be applied properly, you will have a very hard time using the heights in javascript animations or calculations.
Check out the following code and what it will look like without any clearfix.

<style>
*{
	font-family:verdana;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	color:#686868;
}
.parent{
	border:1px solid rgb(145, 145, 145);
	width:90%;
	margin:30px auto;
	border-radius:5px;
}
.child{
	background:rgb(167, 235, 238);
	width:50%;
	float:left;
	padding:10px 5px;
}
.parent:last-child{
	background:rgb(146, 207, 146);
	margin-top:80px;
	padding:20px;
}
</style>
<body>
<div class="parent">
	<div class="child">This is the child element 1</div>
	<div class="child">This is the child element 2</div>
</div>
<div class="parent">
	Notice the deformed border on the above element.
</div>
</body>

<style>

font-family:verdana;

box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

color:#686868;

}

.parent{

border:1px solid rgb(145, 145, 145);

width:90%;

margin:30px auto;

border-radius:5px;

}

.child{

background:rgb(167, 235, 238);

width:50%;

float:left;

padding:10px 5px;

}

.parent:last-child{

background:rgb(146, 207, 146);

margin-top:80px;

padding:20px;

}

</style>

<body>

<div class="child">This is the child element 1</div>

<div class="child">This is the child element 2</div>

</div>

Notice the deformed border on the above element.

</div>

</body>

DEMO

This is the child element 1

This is the child element 2

Notice the deformed border on the above element.

I hope you see the problem :D, and if you are wondering what style I applied to the * then you should read this post.

How to fix the problem with floats

Insert a clear div: This is an old method but works very well. What you do is put a div after the floated elements like <div class=”clear”></div> and then give it styling as such.

.clear{ display:block; clear:both; width:100%; }

1
2
3
4
5

.clear{
display:block;
clear:both;
width:100%;
}

The problem with this method is that you will have to add an extra element in your layout which is not preferred sometimes.
Add overflow and width to the parent element: Consider this styling for the parent element:

.parent{ border:1px solid rgb(145, 145, 145); width:90%; overflow:auto; }

1
2
3
4
5

.parent{
border:1px solid rgb(145, 145, 145);
width:90%;
overflow:auto;
}

Adding the overflow property forces the element to clear its child floated elements thus, providing a solution to our problem. Some browsers need a width for this to work. For example, in explorer providing a width triggers the hasLayout.
Now, what troubled me when I found this solution was that the overflow property has a default value of auto, so why doesn’t this trick work by default. I am still looking for a valid answer but apparently CSS works this way
P.S. The credits for this go to quirksmode who apparently saw it from somewhere else.
Use the :after pseudo class: This is my favourite, partly because I didn’t read it somewhere else, discovered it on my own( really not boasting ).But anyway, here it is:

.parent:after{ content:''; width:100%; display:block; clear:both; }

1
2
3
4
5
6

.parent:after{
content:'';
width:100%;
display:block;
clear:both;
}

The advantage with this method is that you don’t need any extra HTML unlike the first method, while an obvious disadvantage is the use of :after might reduce your browser compatibility due to browser support. Check your requirements here.

After applying any of the above fixes, you should see the following result:

DEMO

This is the child element 1

This is the child element 2

Notice the border on the above element is now fine.

Well, sometimes the issues with floats are not visible to use maybe due to the architecture we used, and even when we are facing the mentioned problem, one technique might favour the situation more than other. So, you should be aware of what all ways are present to tackle your problem.

There might be easier methods to achieve the required effect and if you do know some other method or found some problem with the ones mentioned above, please share them with us!