-1

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

我在这个地址问了一个问题：为什么使用<div class="clear"></div>？

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

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

  1. 为什么下面的网格演示代码没有使用<div class="clear"></div>？同样存在 2 组两个浮动 div 元素，所以不适合<div class="clear"></div>在最后一个浮动 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 -->
  1. 接受答案的所有者写道：“没有这个，你的导航元素后面的内容可能会出现在你的导航元素旁边，而不是在它下面。” 由于他使用了 MAY 语法，我删除<div class="clear"></div>并看到 IE9 和 Chrome 25.0.1364.172 的输出没有任何变化；是什么让他写了 MAY？旧浏览器（尤其是旧 IE 版本）？
4

1 回答 1

0

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

<div class="clear"></div> 总是有一些与之相关的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 彼此之间的交互/行为方式。

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

一些资源： CSS Wiki on Overflow 属性 CSS Wiki on Clear 属性

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

于 2014-01-20T14:09:34.693 回答