使用float：left和float：right时，将容器高度增加到最高元素

Question

我有一个容器元素，其中有两个子元素放在float：left和float：right中。左浮动元素有一行文本。右浮动元素有两行由
分隔。现在，当部署它时，容器占用左浮动元素的高度，因此右浮动元素中的第二行显示在容器外部。我们可以做些什么来防止这种情况发生？

Answer 1

你需要的是一个显示器：内联块;或溢出：隐藏;容器中的财产。请检查此JSFiddle

<div id="m">
    <div class="a">a<br>c</div>
    <div class="b">b</div>
</div>

#m{
    background-color: gray;
    width: 100%;
    overflow: hidden;
}

.a{
    float: left;
}

.a{
    float: right;
}

Answer 2

使用clearfix实现。该修复程序通常通过类名附加到要扩展为包含浮动子元素的父DIV。例如，请参阅http://www.webtoolkit.info/css-clearfix.html