/* css file corresponding to the html file - float-1.html */

/* scenario - 1 */

.outer-container {
   background-color: #66CCFF; /* light blue/cyan */
   border: 1px solid #000;    /* black */
}

.normal {
   background-color: #00FF33;    /* light green */
   border: 1px solid #003300;   /* dark green */
}

.float-left {
   background-color: #CC00CC;   /* light pink */
   border: 3px solid #CC0000;       /* black */
   float: left;
   width: 200px;  /* width be better defined  for float elements, otherwise results are unpredictable*/
}

.text-around-the-float {
   background-color: #CCFF00;    /* yellow */
   border: 2px solid #3300CC;       /* black */
}

/* scenario - 1 ends */

.just-explain {
   clear: both;
   margin-top: 50px;
}

/* scenario - 2 */

.clearfix:after {
   display:block;
   clear:both;
   height: 0;
   visibility: hidden;
   content:'.';
}

.overflowing-float {
   clear:both;
}

/* scenario - 3 */

/* IE hack */
.clearfixIE {
   zoom:1;
}

/* scenario -3 ends */

/* scenario - 4 */

.span-margin {
   margin: 50px;
}