Css 使用空的clearing div强制包含浮动元素的容器拉伸：这被认为是好的样式吗？_Css_Cross Browser_Css Float_Compatibility

Css 使用空的clearing div强制包含浮动元素的容器拉伸：这被认为是好的样式吗？

css

Css 使用空的clearing div强制包含浮动元素的容器拉伸：这被认为是好的样式吗？,css,cross-browser,css-float,compatibility,Css,Cross Browser,Css Float,Compatibility,我想提请大家注意下面的例子。在wrapperA中，封闭两个浮点数的块级标题元素被强制拉伸到封闭浮点数的全高。在更一般的情况下，它将拉伸到两个浮点数中最高的一个的总和，或者是最高浮体的总高度，如果它们不适合在标题中，并且最终被堆叠在几行浮体上。强制此拉伸的图元是图元。多亏了这个元素，如果我们想让wrapperA将浮子封装在其中，那么就设置高度或者在更一般的情况下，将包装纸上浮动元素的最大高度之和求和a 元素是冗余的当我们需要将非浮动容器拉伸到其包含的浮动元素以便其背景（在本例中为洋红色）可见

我想提请大家注意下面的例子。在wrapperA中，封闭两个浮点数的块级标题元素被强制拉伸到封闭浮点数的全高。在更一般的情况下，它将拉伸到两个浮点数中最高的一个的总和，或者是最高浮体的总高度，如果它们不适合在标题中，并且最终被堆叠在几行浮体上。强制此拉伸的图元是图元。多亏了这个元素，如果我们想让wrapperA将浮子封装在其中，那么就设置高度或者在更一般的情况下，将包装纸上浮动元素的最大高度之和求和a 元素是冗余的

当我们需要将非浮动容器拉伸到其包含的浮动元素以便其背景（在本例中为洋红色）可见时，这被认为是一种好的技术吗

请注意，在wrapperB代码中，header元素不包含html中出现在其内部的浮动元素，因为header元素以正常流布局，而浮动元素以浮动流的形式布置。由于浮动流中的元素被移除从正常流量来看，包装器B的高度为零。尽管如此，我们仍然可以要显示在浮动下方而不是顶部的元素，通过使用clear:tware样式在这样的底部元素上

图1：

图1的代码：

请注意，如果这一点明确：两者；未在bottomB上指定样式，然后是bottomB 当然会出现在wrapperB的顶部，就在零高度标题的下方，如下图所示，浮标堆叠在其上方：

图2：

图像2的代码：

在这种情况下，可以做的另一件事当然是浮动收割台，例如，我们可以将其向左或向右浮动，只要我们还指定了它的宽度，以便它与包含这样它就不会水平收缩到它所包含的浮点元素的宽度。然而，在这种情况下，header容器浮动在bottomB的顶部。为了避免这种情况,，我们必须运用明确的原则：两者皆有；底部样式B。然而，使用这种技术，我们必须请记住，在上浮动同级下面的DIV上指定的任何边距都将崩溃到零，就像下面的利润率达到可笑的1000000px；变为零：

图3：

图像3的代码：

我想知道这三种技术中哪一种最适用于所有浏览器，可能追溯到IE6和quirks模式浏览器

谢谢

<!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>

<!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>

<!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>