html - Clearfix 不适用于固定宽度的列

Question

我是 Bootstrap 的新手，我遇到了 clearfix 的问题。我正在尝试设计一个具有 3 个内容列(可变高度)和第 4 个固定宽度的广告列的网站。

<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>    

类 col-fixed 看起来像这样:

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

其他一切都是标准的 Bootstrap 。因为我的广告栏的高度比内容元素的高度大得多，所以第一行和第二行之间有很大的差距。我该如何解决这个问题？我可以:

1. 在使用 clearfix 时忽略特定的 div？
2. 使用不同的网格布局？

在此先感谢您的帮助或提示!

Answer 1

好的，我解决了我的问题。这成功了:

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

.contentrow {
  width:calc(100% - 160px);
  float: left;
}

.contentcol {
  padding-left: 2px;
  padding-right: 2px;
}

我还有固定宽度的广告栏。但是我添加了 float: left;到我的内容专栏。

参见:https://jsfiddle.net/tprarmjc/1/

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