Question

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

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

在得到答案并接受之后（我也阅读了评论部分中给出的链接），现在我有第2和第3个问题。

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

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

我明确提到我希望{2}代码中有<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语法＆amp;我删除了<div class="clear"></div>，发现IE9和Chrome 25.0.1364.172的输出没有任何变化。是什么让他写MAY？旧的浏览器（特别是旧的IE版本）？

Answer 1

这取决于与 HTML 中不同类/ ids /元素相关联的 CSS 。

<div class="clear"></div> 总是有一些与之关联的CSS，即：

.clear { clear: both; }

以上 CSS 是防止浮动问题的原因。那就是说......如上所示，使用“clear 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时，它保持不变。基本上你不需要clear div，因为行类已经附加了 CSS 来防止这个问题发生。

选择器可能看起来像这样：.row { clear: both; } .row类可能还有其他与之关联的CSS，另一个非常可能的属性是overflow: hidden;该属性也会影响你的div和周围的div相互作用/表现。

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

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

希望这能为你解决这个问题吗？（原谅双关语哈哈）

为什么<div class =“clear”> </div>没用？

1 个答案: