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 *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>