嵌套浮动 clearfix 延伸到错误高度的解释

Question

我对浮动 div 及其上的 clearfix 有疑问。 clearfix 使容器扩展到错误的高度。在 JSfiddle html 部分，我添加了 <!-- ADD class="container" HERE --> 。将类添加到它旁边的 div 中，您会看到它的子 (h_container) 正在扩展。

http://jsfiddle.net/f9ojod2y/1/

html:

<div class="container">
    <div class="right_f">
    </div>
    <div class="left_f">
        <div>    <!-- ADD class="container" HERE -->
           <div class="h_container">
                <div class="left_h">

                </div>
            </div>
            <div class="h_container">
               <div class="right_h">

               </div> 
            </div>
       </div>
    </div>
</div>

这是 right_f 向右浮动。 h_container 向左浮动

我预计h_container 根本不会扩大，但它会扩大到right_f 的高度。我知道这个问题可以通过从 clearflix 中删除 display:table 或删除课程来解决，但出于某些原因，我希望课程在那里。

谁能解释为什么left_f 中的clearfix 使h_container 与right_f 具有相同的高度？

另外，我注意到在 jsfiddle 中绿色 div 上方有我无法解释的空闲空间。我的原始代码中没有。

Answer 1

这对我有用，希望它能解决您的问题。

更改这些类：

.right_f {
    background-color: red;
    float: right;
    width: 200px;
}
.left_f {
    background-color: green;
    float: left;
    width: calc(100% - 220px);
}

只需添加一个类即可删除由于<p> 标签而产生的额外填充：

.container p{
   margin:0px;
   padding:0px;
}

请让我知道这是否可行，还请指定您想要相同高度的 3 个 div，我也可以为此建议代码。谢谢