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的跨浏览器复杂化。我能够在浮动元素之后立即始终将边距应用于元素的最简洁方法是应用“break”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。这样，您不需要特殊的清除元素，容器将自动扩展以适应浮动的内容。

CSS：使用div只是为了打破浮动的好习惯？

2 个答案: