clearfix无法与固定宽度列一起使用

Question

我是Bootstrap的新手，我对clearfix有问题。我正在尝试设计一个具有3个内容列（可变高度）的网站和一个带有固定宽度的广告的网站。

<div class="container-fluid">
   <!-- ad column with fixed width 300px -->
   <div class="col-fixed-width"></div>
   <!-- content columns -->
   <div class="col-md-4"></div>   
   <div class="col-md-4"></div>  
   <div class="col-md-4"></div> 
   <div class="clearfix"></div>
   <div class="col-md-4"></div>  
   <div class="col-md-4"></div>  
   <div class="col-md-4"></div> 
</div>    

class col固定看起来像这样：

.col-fixed {
    width: 318px;
    float: right;
}

其他所有内容都是标准的引导程序。因为我的广告列的高度远大于内容元素的高度，因此第一行和第二行之间存在很大的差距。我该如何解决？我可以：

1. 忽略使用clearfix的特定divs？
2. 使用其他网格布局？

事先感谢您的任何帮助或提示！

Answer 1

好吧，我解决了问题。这是一个技巧：

.col-fixed {
  width: 160px;
  float: right;
}
.contentrow {
  width:calc(100% - 160px);
  float: left;
}
.contentcol {
  padding-left: 2px;
  padding-right: 2px;
}

我仍然有一个固定宽度的广告列。但是我添加了float：左；到我的内容列。

请参阅：https：//jsfiddle.net/tprarmjc/1/

但是我无法解释为什么它解决了问题？也许有人可以向我解释。