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>

class col-fixed 看起来像这样：

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

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

忽略关于使用 clearfix 的特定 divs?
使用不同的网格布局？

提前感谢您的帮助或提示！

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/

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

Clearfix 不适用于固定宽度的列

Clearfix not working with a fixed width column

html

css

grid-layout

clearfix

twitter-bootstrap