When a container has multiple elements with float properties we need to clear the float at the end. Usually what we do is create an empty div with clear:both property below the float elements inside the container. Without extra mark-up this issue can be solved using css.
Need to prepare a clearfix class like below:-
.clearfix:after
{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden:
}
To support IE 7 & IE 6 additional codes needed to be written:-
*:first-child+html .clearfix{min-height:1px;} /*for IE 7*/
* html .clearfix{height:1%;} /*for IE 6 */
Assigning the clearfix class to the container will automatically clear all the floats.
Advertisement
