Classic CSS Clearfix

Classic CSS Clearfix CSS

This clearfix code has been around the Web for years circulating amongst savvy web developers. You should apply this class onto a container which holds floating elements. This will ensure any content which comes afterwards will not float but instead be pushed down and cleared

Classic CSS Clearfix CSS Code

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

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

Use of Clearfix CSS

<div class="content clearfix">Your content will goes here</div>

Tags: css clearfix class, css clearfix bootstrap, css clearfix tutorial, css and clearfix, css clearfix for all browsers, css reset and clearfix, css clearfix both, css clearfix best, css better clearfix, css clearfix code, css clearfix css tricks, css display clearfix, clearfix in css, css clearfix group, css clearfix html5

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

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=""> <s> <strike> <strong>