固定幅の列でClearfixが動作しない

Question

私はブートストラップを初めて使用しています。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-固定ルックス：他

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

すべてが標準のブートストラップです。私の広告コラムの高さはコンテンツ要素の高さよりはるかに大きいので、第1行と第2行の間に大きなギャップがあります。これをどうすれば解決できますか？

1. clearfixの使用に関しては、特にdivsを無視できますか？
2. 別のグリッドレイアウトを使用していますか？

ご協力いただきありがとうございます。

Answer 1

[OK]を私の問題を解決しました。これはトリックでした：

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

？たぶん誰かが私にそれを説明することができます。