1

我想提请您注意以下示例。在 wrapperA 中，包含两个浮点数的块级标题元素被强制拉伸到包含的浮点数的全高（在更一般的情况下，它将拉伸到两个浮点数中最高的总和，或总和最高浮动的高度（如果它们不适合标题并最终堆叠在几行浮动 div 上）。强制此拉伸的元素是元素。多亏了这个元素，如果我们希望 wrapperA 将浮动包围在其中，那么在 wrapperA 元素上设置高度（或更一般的情况下，将浮动元素的最大高度之和相加）是多余的。

当我们需要将非浮动容器拉伸到其包含的浮动元素时，这是否被认为是一种好技术（以便它的背景，在这种情况下为洋红色，变得可见）？

请注意，在 wrapperB 代码中，header 元素没有包含在 html 中出现在其内部的浮动元素，因为 header 元素以正常流程布局，而浮动元素以浮动流程布局。由于浮动流中的元素已从正常流中移除，因此 wrapperB 的高度为零。尽管如此，我们仍然可以通过在底部元素上使用“clear：both”样式使元素出现在浮动下方，而不是最顶部。

图 1：

在此处输入图像描述

图片 1 的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to use a clearing div.</title>
</head>
<body>
  <div id="wrapperA" style="width: 400px; height: 200px; background: black;">
    <header style="background: magenta;">
      <div id="oneA" style="float: left; width: 50px; height: 100px; background: yellow;">
      </div>
      <div id="twoA" style="float: right; width: 50px; height: 100px; background: cyan;">
      </div>
      <div id="clear" style="clear: both;"></div>
    </header>
    <div id="bottomA" style="clear: both; height: 50px; background: green;">
    </div>
  </div>
  <div id="spacer" style="width: 400px; height: 20px; background: red; text-align: center;">
    Space between WrapperA and WrapperB
  </div>
  <div id="wrapperB" style="width: 400px; height: 200px; background: black;">
    <header style="background: magenta;">
      <div id="oneB" style="float: left; width: 50px; height: 100px; background: yellow;">
      </div>
      <div id="twoB" style="float: right; width: 50px; height: 100px; background: cyan;">
      </div>
      <!--
      <div id="clear" style="clear: both;"></div>
      -->
    </header>
    <div id="bottomB" style="clear: both; height: 50px; background: green;">
    </div>
  </div>
</body>
</html>

请注意，如果此“清除：两者；” 样式没有在底部B上指定，那么底部B当然会出现在wrapperB的最顶部，就在零高度标题的下方，如下图所示（浮动堆叠在其上方）：

图 2：

在此处输入图像描述

图像2代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to use a clearing div.</title>
</head>
<body>
  <div id="wrapperB" style="width: 400px; height: 200px; background: black;">
    <header style="background: magenta;">
      <div id="oneB" style="float: left; width: 50px; height: 100px; background: yellow;">
      </div>
      <div id="twoB" style="float: right; width: 50px; height: 100px; background: cyan;">
      </div>
      <!--
      <div id="clear" style="clear: both;"></div>
      -->
    </header>
    <div id="bottomB" style="height: 50px; background: green;">
    </div>
  </div>
</body>
</html>

在这种情况下可以做的另一件事当然是浮动标题，例如我们可以将它向左或向右浮动，只要我们还指定它的宽度，使其与包装器一样宽，这没有区别包含它的元素（这样它就不会水平收缩到它包含的浮动元素的宽度）。但是，在这种情况下，标题容器会浮动在底部 B 的顶部。为避免这种情况，我们必须应用“clear: both;” 底部样式 B. 但是，使用此技术，我们必须记住，在上浮动兄弟之下的 DIV 上指定的任何边距都会崩溃为零，就像可笑的 1000000px 的以下边距顶部一样；崩溃为零：

图片3：

在此处输入图像描述

图像3的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to use a clearing div.</title>
</head>
<body>
  <div id="wrapperC" style="width: 400px; height: 400px; background: black;">
    <header style="float: left; width: 400px; background: magenta; margin-bottom: 20px;">
      <div id="oneC" style="float: left; width: 50px; height: 100px; background: yellow;">
      </div>
      <div id="twoC" style="float: right; width: 50px; height: 100px; background: cyan;">
      </div>
    </header>
    <div id="bottomC" style="clear: both; height: 50px; background: green; margin-top: 1000000px;">
    </div>
  </div>
</body>
</html>

我想知道这三种技术中哪一种最适用于所有浏览器，可能可以追溯到包括 IE6 和“怪癖模式”浏览器。

谢谢！

4

0 回答 0