为什么没有使用 <div class="clear"></div>？答案

【问题标题】：Why <div class="clear"></div> didn't used?为什么没有使用 <div class="clear"></div>？
【发布时间】：2014-02-09 16:41:16
【问题描述】：

嗨，有时学习一些东西会让你更加困惑，我现在就在那个位置，提前谢谢。

我在这个地址问了一个问题：Why <div class="clear"></div> used?

得到答案并接受后（我还阅读了 cmets 部分中给出的链接），现在我有第二个和第三个问题。

根据相关问题给出的输入代码，

为什么下面的grid demo code没有使用<div class="clear"></div>？同样存在 2 组两个 浮动 div 元素，所以在 最后一个浮动 div 元素之后使用<div class="clear"></div> 不合适吗？

我明确提到我希望 <div class="clear"></div> 代码出现在两个地方：紧跟在 <div class="col col_7"> 之后和紧跟在 <div class="col col_4"> 之后

    <div class="row">
        <div class="col col_1">col_1</div>
        <div class="col col_7">col_7
            <div class="row">
                <div class="col col_3">col_3</div>
                <div class="col col_4">col_4</div>
            </div><!-- row -->
        </div>
    </div><!-- row -->
</div><!-- col_8 -->

接受答案的所有者写道：“没有这个，您的导航元素后面的内容可能出现在您的导航元素旁边，而不是在它下方。”由于他使用了 MAY 语法，我删除了<div class="clear"></div>，发现 IE9 和 Chrome 25.0.1364.172 的输出没有任何变化；是什么让他写了 MAY？旧浏览器（尤其是旧 IE 版本）？

【问题讨论】：

旧的 IE 版本，尤其是 IE6 和 IE7 在涉及到float 时往往行为不端。
存在溢出：隐藏在 .row 类中，这就是为什么我们不需要清除浮动的元素
清除浮动的方法有很多种：详见alistapart.com/article/css-floats-101

标签： html css grid-layout clearfix

【解决方案1】：

这取决于您的 CSS，它与您的 HTML 中的不同 classes/ids/elements 相关联。

<div class="clear"></div> ALWAYS 有一些与之关联的 css，即：

.clear { clear: both; }

上面的 CSS 是它防止浮动问题的原因。也就是说...使用上面显示的“清除 div”是执行此操作的众多方法之一。

在您的特定情况下，给定以下 HTML：

<div class="row">
        <div class="col col_1">col_1</div>
        <div class="col col_7">col_7
            <div class="row">
                <div class="col col_3">col_3</div>
                <div class="col col_4">col_4</div>
            </div><!-- row -->
        </div>
    </div><!-- row -->
</div><!-- col_8 -->

“行”类很可能在 CSS 中具有 clear: both; 属性。这可以解释为什么当您删除清除 div 时，它保持不变。本质上您不需要清除 div，因为行类已经附加了 CSS 以防止该问题发生。

选择器可能看起来像这样：.row { clear: both; } .row 类可能还有其他关联的 CSS，另一个很可能的属性是 overflow: hidden; 该属性还可以影响您的 div 和周围 div 的交互/行为方式彼此相邻。

总结一下：是NOT HTML <div class="clear"></div> 阻止了这个浮动问题的发生。它IS CSS 属性和值clear: both; 可应用于防止问题发生的任何 HTML 元素。

一些资源： CSS Wiki on Overflow property CSS Wiki on Clear property

希望这可以为您解决这个问题？（请原谅双关语哈哈）

【讨论】：