Clearfix Hack snippet

clearfix.css

/**
 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;">
    &nbsp;
  </div>  
 
  <div style="width:49%;height:20px;background:red;">
    &nbsp;
  </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;
}

/**
* Method 3
* Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
*/

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

.cleared {
  clear: left;
}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root; 
}