Question

我有浮动div和它们的clearfix的问题。 clearfix使容器扩展到错误的高度。在JSfiddle html部分中，我添加了。将该类添加到它旁边的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，我也可以建议代码。感谢

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

1 个答案: