Nested clearfixes. How to decide?

Question

css

Hey!
Two-column grid: left is fixed width, right is full width.
I use clearfix

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* ie 6/7 */
}

Inside the right column there is also content in which the stream also needs to be cleared.
There is an unpleasant thing:
Here is the complete example: https://jsbin.com/duritozara/edit?html ,css,output
Guys, tell me how to get out of the situation?
Thank you.

Answer 1

Self-answer :) The
problem is well revealed here:
css-live.ru/tricks/novaya-alternativa-clearfix-ui...

.clearfix  {
        /* display: table */
        -height: 1%; /*IE6*/
        *zoom: 1; /*IE6-7*/
        display: table;
}
/* Очень важное дополнение! */
.clearfix:after {
    /*content: '1 1';*/  /*Op15+*/
   content: '1 1 1 1 1 1 1 1 1 1 1'; /*Op12+*/
   font: .1px/0 a;
   display: block;
   word-spacing: 99in;
   overflow: hidden; /*IE8-*/
}

Answer 2

Something like this, you can still
jsfiddle.net/zzuf7tsx
the problem is you have a container stretched to the height of the side bar, because it is inherited from it, an easy way, add a block inside the right block and make it float: left; and everything will work, but in general such things are done through position, and it’s easier to adapt them later