<h1> Block Formatting Context tester</h1>
<p> click an element to set it as a BFC </p>

<input type="checkbox" id="check-c1"/>
<label for="check-c1" class="c1">
  
  <img class="i1" src="http://placekitten.com/100/150" width="100" height="150"/>
  
  <input type="checkbox" id="check-p1"/>
  <label for="check-p1" class="p1">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
  </label>     
  
</label>

<input type="checkbox" id="check-c2"/>
<label for="check-c2" class="c2">
  
  <img class="i2" src="http://placekitten.com/100/150" width="100" height="150"/>
  
  <input type="checkbox" id="check-p2"/>
  <label for="check-p2" class="p2">
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia cumque temporibus natus veritatis! Dignissimos similique, repellat provident odit dolore, corrupti ex veritatis esse dolorem modi incidunt, eos expedita exercitationem. Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
  </label>     
  
</label>

input{
  display:none;
}

.c1, .c2{
  display:block;
  width:100%; max-width:300px;
}

.c1{
  border: 2px solid red;
}

.i1, .i2{
  margin: 5px;  
}

.i1{
  float: left;
}

.p1, .p2{
  display: block;
  border: 2px solid green;
}

#check-c1:checked +.c1{
 background: rgba(255, 100, 100, 0.2);
  column-count: 1; /* SETS BFC */
}

#check-p1:checked +.p1{
  background: rgba(100, 255, 100, 0.2);
  column-count: 1; /* SETS BFC */
}

.c2{
  border: 2px solid blue;
}

.i2{
  float: right;
}

#check-c2:checked +.c2{
  background: rgba(100, 100, 255, 0.2);
  column-count: 1; /* SETS BFC */
}

#check-p2:checked +.p2{
  background: rgba(100, 255, 100, 0.2);
  column-count: 1; /* SETS BFC */
}

*{
  box-sizing: border-box;
}

body{
  background: FloralWhite;
  margin: 20px;
}

/*No JS on this one... altough probably should have use it for the switches to keep the HTML and CSS clearer... */