Created
December 16, 2012 14:26
-
-
Save pranavpatil19/4307791 to your computer and use it in GitHub Desktop.
CSS(snippet):Clearfix hack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
CSS clearfix | |
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it: | |
{clear: both;} | |
clearfix | |
Once you understand what is happening, use the method below to “clearfix” it. | |
For modern browsers | |
1. The space content is one way to avoid an Opera bug when the | |
contenteditable attribute is included anywhere else in the document. | |
Otherwise it causes space to appear at the top and bottom of elements | |
that are clearfixed. | |
2. The use of `table` rather than `block` is only necessary if using | |
`:before` to contain the top-margins of child elements. | |
/* HTML CODE */ | |
<div class="clearfix" style="border:1px solid blue;padding:5px;"> | |
<div style="float:right;width:49%;height:50px;background:green;"> | |
| |
</div> | |
<div style="width:49%;height:20px;background:red;"> | |
| |
</div> | |
</div> | |
/*** Method1 ***/ | |
.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%; | |
} | |
/* Method2 : Micro clearfix */ | |
.cf:before,.cf:after { | |
content: " "; /* 1 */ | |
display: table; /* 2 */ | |
} | |
.cf:after { | |
clear: both; | |
} | |
/** | |
* For IE 6/7 only | |
Include this rule to trigger hasLayout and contain floats. | |
*/ | |
.cf { | |
zoom: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment