index.html

<div id="wrapper"> <!-- this is only for demo -->
  <h1>A simple float clearing demo</h1>
  
  <h2>Problem</h2>
  <p><strong>1. Borders and backgrounds misbehaving when applied to an element that contains a float/s</strong></p>
  
  <div class="demo">
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
  </div>
  
  
  <h2>Solution</h2>
 
  <p><strong>1. Apply overlow hidden to container &mdash; not really best practice</strong></p>
  
<div class="demo overflow-hidden">
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
  </div>
  
  <p><strong>2. Where overflow hidden fails</strong></p>
  
  <p>Overflow hidden fails where you have an element that you want to pull from from the containing box. That is you want it to lie slightly outside the container.</p>
  
  <p><em><strong>For example you want this:</strong></em><p>
  
  <div class="demo clr">
    <div class="grid pulled">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
      <div class="star"></div>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
  </div>
    
    <p><em><strong>But you get this instead!</strong></em><p>
  
  <div class="demo overflow-hidden">
    <div class="grid pulled">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
  </div>
      
      <h2>The Solution</h2>
  <p><strong>Use the clear fix method instead</strong></p>
  
<div class="demo clr">
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid pulled2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
      <div class="star"></div>
</div>
  
  </div>
      
      <h3>Happy days &#9786;</h3>
      
      <h2>Clearfix method without adding "clr" class</h2>

<div class="demo2">
    <div class="grid pulled">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
  </div>
      <h3 class="txt-left">More happy days &#9786;</h3>
  
    <h2>Another example</h2>
      
      <p><strong>You get this:</strong></p>
      
       <p>Something like this will happen when the sum total width of all your floats does not equal 100% or is greater than 100% causing one of your floated elements to drop to the next line.</p>
    
      <br class="clr">
      
      <div class="demo3">
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
  </div>
      
      <p id="bg">Lorem ipsum consequat irure anim veniam eu aliqua exercitation. Lorem ipsum ad in enim adipisicing laboris nisi cillum tempor dolore officia in. Lorem ipsum esse labore eiusmod deserunt reprehenderit in id proident eiusmod Excepteur labore eiusmod reprehenderit deserunt officia cupidatat quis occaecat exercitation dolore minim ad tempor eiusmod officia et consequat exercitation culpa magna eiusmod qui officia labore adipisicing eiusmod irure in minim do officia irure proident laboris commodo esse veniam incididunt laboris sint qui consectetur minim sunt tempor consectetur nisi eiusmod id aliquip enim nulla aliquip cillum cillum anim laborum laboris pariatur esse Ut amet qui Ut irure sint commodo est in sed in adipisicing commodo dolore cillum proident id nostrud sed exercitation Duis aute amet laborum proident eu eu tempor veniam sint velit commodo cupidatat voluptate eiusmod consequat anim veniam nisi culpa aute officia nisi amet exercitation in.</p>
      
       
      <h2>The Solution</h2>
      <p><strong>Add class "clr" to the containing element. No need to add a break clear in your markup.</strong></p>
  
      
      <div class="demo3 clr">
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
    <div class="grid2">
  <img src="http://farm4.staticflickr.com/3298/3577042795_4ae17f1a3c_n.jpg" alt="" title="">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea amet commodo consequat.</p>
</div>
        
  </div>
      
      <p id="bg">Lorem ipsum consequat irure anim veniam eu aliqua exercitation. Lorem ipsum ad in enim adipisicing laboris nisi cillum tempor dolore officia in. Lorem ipsum esse labore eiusmod deserunt reprehenderit in id proident eiusmod Excepteur labore eiusmod reprehenderit deserunt officia cupidatat quis occaecat exercitation dolore minim ad tempor eiusmod officia et consequat exercitation culpa magna eiusmod qui officia labore adipisicing eiusmod irure in minim do officia irure proident laboris commodo esse veniam incididunt laboris sint qui consectetur minim sunt tempor consectetur nisi eiusmod id aliquip enim nulla aliquip cillum cillum anim laborum laboris pariatur esse Ut amet qui Ut irure sint commodo est in sed in adipisicing commodo dolore cillum proident id nostrud sed exercitation Duis aute amet laborum proident eu eu tempor veniam sint velit commodo cupidatat voluptate eiusmod consequat anim veniam nisi culpa aute officia nisi amet exercitation in.</p>
  
      <h3 class="txt-left">Even more happy days ☺</h3>
  
    <blockquote>
    <span>&ldquo;</span>So there you have it float clearing in a nutshell. All without using unsemantic break clears that add clutter and code bloat to your markup. <em>Happy happy days <i>☺</i></em>
      </blockquote>
 
  <hr>
  
  <!-- image credit -->
<p id="credit">Images courtesy of <a href="http://flic.kr/p/6s6hcD">Karen Horton</a> on Flickr</p>
  
  <br>
 
  
</div>

style.css

/*** | DEMO STUFF ONLY ***/
body {
  font: 12px/1.5 verdana, sans-serif;
  background: #eee;
  padding-bottom: 44px;
  
}

#wrapper {
  width: 65%;
  padding: 22px 25px 33px;
  background: #fff;
  margin: 0 auto;
  min-height: 1500px;
  box-shadow: 0 0 1px 3px rgba(0,0,0,.04);
}

h1 {
  font-family: georgia, serif;
  font-weight: normal;
  font-size: 48px;px;
  line-height: 50px;
  color: #222;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 6px double #ededed;
}

h2 {
  color: #09f;
  font-size:15px;
  margin-bottom: 15px; 
  margin-top: 27px;
  line-height: normal;
}

img {
  max-width: 100%;
  height: auto;
}

#credit {
  font:italic 12px/20px georgia, serif;
  color: #555;
  text-align: left;
  margin-bottom: 22px;
}
a {
  color: #09f;
}

#amp {
  font-family: "times","times new roman",georgia, serif;
}

hr {
  margin-top: 44px;
  width: 2px;
  border: 0;
  height: 2px;
  border-top:1px solid #ccc;
  display: block;
  width: 100%;
}

p {
  margin-top: 0;
}

h3 {
  font-family: georgia, serif;
  font-weight: normal;
  font-size: 40px;
  font-style: italic;
  color: #888;
  text-align: right;
}
/*** END DEMO STUFF ***************************/

/*Star*/
.star {
   height: 50px;
   width: 50px;
   background: orange;
   position: absolute;
   top: -10px;
   left:-20px;
 
}

.pulled2 .star {
  left: auto;
  right:-20px;
}

.star:before {
   height: 50px;
   width: 50px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
 
}
.star:after {
   height: 50px;
   width: 50px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

/* demo problem */
.demo,
.demo2{
  border: 1px solid #777;
  background: #ccc;
  margin-bottom: 22px;
}

.demo,
.demo2 {
  text-shadow: 1px 1px 1px #fff;
}

.end {
  text-align: left;
  
}

#bg {
  background: #00A9A4;
  color: #fff;
  padding: 15px;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}

.txt-left {
  text-align:left;
}

.grid {
  width: 21%;
  float: left;
  margin:2%;
}

.grid2 {
  width: 18%;
  float: left;
  margin:2%;
}

.left {
  float:left;
  margin-top:5px;
  margin-right: 20px;
}

.pulled, .pulled2 {
  background:#fff;
  margin-left: -70px;
  padding: 20px 20px 20px 20px;
  box-shadow: 0 0 1px 2px rgba(0,0,0,0.2);
  width: 25%;
  position: relative;
}

.pulled2 {
  margin-left:2%;
  margin-right:-80px;
}


blockquote {
  font-size: 22px;
  padding: 20px;
  overlow: hidden;
  width: 72%;
}

blockquote em {
  font-style: italic;
  font-family: georgia;
  color: #888;
  font-size: 14px;
}

 em i{
  font-style: normal;
}

blockquote span {
  display: block;
  text-indent:-65px;
  float:left;
  font-family:"lucida sans unicode","lucida grande", sans-serif;
  font-size:400px;
  line-height:0;
  margin-top:200px;
  font-weight: bold;
  color: #ddd;
  margin-right: 15px;
}



/*overflow hidden*/
 .overflow-hidden {
  overflow: hidden;
}

/*Clearfix Method*/
.clr:before,
.clr:after,
.demo2:before,
.demo2:after{
    content: " ";
    display: table;
}

.clr:after,
.demo2:after{
    clear: both;
}

/*   IE 6 & 7 fix
      Include the following rule to trigger 
      hasLayout and contain floats.
*/
.clr,
.demo2{
    *zoom: 1;
}