Clearing float with css

There are two ways to clear float. I will cover both ways to clear float.

1. You can use overflow: hidden; and clear: both; to clear the float but this have some drawback as well. When you are use using box-shadow or any element from that will div be hidden.
.overflowHidden{overflow: hidden; clear: both;}

2. You can use Clearfix css properties. I always recommend you use this one because it’s don’t have any draw back as overflow:hidden and all modern day browser support this. Please click on link to check the demo . http://jsfiddle.net/wargis/cfwdLy97/

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.