css - CSS：使用 div 来打破浮动的好习惯？

Question

如果这个好习惯？

<div>
    <div style="float:left;">
        text a
    </div>
    <div style="float:right;">
        text b
    </div>
    <div style="clear:both;"></div>
</div>
<div>
    text c
</div>

即使我将“clear：both”应用于该div，我也遇到了跨浏览器对包含“text c”的div应用边距的并发症。在浮动元素之后，我能够始终如一地对元素应用边距的最干净的方法是应用那个“中断” div，它的工作只不过是打破浮动并重置下一个元素的行。这是好习惯吗？

Answer 1

我最近经常看到这个解决方案：

/* Clearing */
.clear:before,
.clear:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
    content: '';
    display: table;
}

.clear:after,
[class*="content"]:after,
[class*="site"]:after {
    clear: both;
}

在您的示例中，您可以将此应用于要清除的父 div：

<div class="clear">
    <div style="float:left;">
        text a
    </div>
    <div style="float:right;">
        text b
    </div>

</div>
<div>
    text c
</div>

Answer 2

解决这个问题最好的办法是应用overflow: auto;到第一个div。这样，您不需要特殊的清除元素，容器将自动扩展以适应浮动内容。