Clearfix 不适用于固定宽度的列答案

【问题标题】：Clearfix not working with a fixed width columnClearfix 不适用于固定宽度的列
【发布时间】：2017-04-20 13:48:34
【问题描述】：

我是 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;
}

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

在使用clearfix时忽略特定的divs？
使用不同的网格布局？

提前感谢任何帮助或提示！

【问题讨论】：

请使用完整的 css 创建一个 sn-p :) 这样做之后，您的问题将更好地理解和解决。
对一个问题的提琴就像对牧师的圣经。没有他们的对手，他们都没有意义。 ;)
好的，对不起。这是小提琴jsfiddle.net/eosvk7nm/1 请参阅 HTML cmets 以获取对我的问题的任何进一步描述。
我的问题真的没有办法解决吗？任何人？我自己无法让它工作......

标签： html css twitter-bootstrap grid-layout clearfix

【解决方案1】：

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

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

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

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

我还有一个固定宽度的广告栏。但我添加了浮动：左；到我的内容专栏。

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

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

【讨论】：