Question

请考虑以下HTML代码段：

<!DOCTYPE html>
  <html>
      <body>
        <div id="bounding-div">
          <div style="float: left">
            <h4>test1</h4>
          </div>
          <div style="float: right">
            <h4>test2</h4>
          </div>
        </div>
        <h3 style="background: #ff0000">Test</h3>
      </body>
    </html>

在firefox中打开时，“test”将在“test1”和“test2”之前呈现。我希望带有id“bounding-div”的div元素将浮动元素分组，之后指定的元素应该在之后呈现。为什么不是这样？我错过了什么？

Answer 1

除了其他浮动元素之外，所有浮动元素都被忽略。因此，边界div“根本不关心”它们。

一个解决方案是添加第三个div clear: both;来清除浮动div。

见这里： http://codepen.io/shippin/pen/WpMjbW

Answer 2

您需要添加一个clearfix。

#bounding-div:after {
  content: "";
  display: table;
  clear: both;
}

<div id="bounding-div">
  <div style="float: left">
    <h4>test1</h4>
  </div>
  <div style="float: right">
    <h4>test2</h4>
  </div>
</div>
<h3 style="background: #ff0000">Test</h3>

Answer 3

您需要为浮动元素添加“clearfix”：

#bounding-div::after {
  display: table;
  clear: both;
  content:"";
}

Jsfiddle

Answer 4

那是因为height中没有parent div的声明，即使div未包含在height也未提及#bounding-div{ background:#ccc; }，请参阅下文，见下文，

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器。当一个元素浮动时，它会被取出文档的流程。它向左或向右移动，直到它接触到其包含框的边缘。

示例 - 1

＆＃13;

<div id="bounding-div">
          <div style="float: left">
            <h4>test1</h4>
          </div>
          <div style="float: right">
            <h4>test2</h4>
          </div>
        </div>
<h3 style="background: #ff0000">Test</h3>

＆＃13;

background

＆＃13;

我已将parent div添加到floated，但无法看到，因为这两个元素都是remove float。如果您display:inline-block并将其替换为html tags are placed in page，或者即使您没有替换它，那么它也可以，您可以看到输出为#bounding-div{ background:#ccc; }，如示例2所示

示例-2

＆＃13;

  <div id="bounding-div">
          <div style="display:inline-block">
            <h4>test1</h4>
          </div>
          <div style="display:inline-block">
            <h4>test2</h4>
          </div>
  </div>
<h3 style="background: #ff0000">Test</h3>

＆＃13;

clear:both

＆＃13;

示例-3 只需在其后面的新元素上添加h3{ clear:both; }即可将其与默认值对齐。

＆＃13;

  <div id="bounding-div">
          <div style="float: left">
            <h4>test1</h4>
          </div>
          <div style="float: right">
            <h4>test2</h4>
          </div>
  </div>
<h3 style="background: #ff0000">Test</h3>

＆＃13;

$entity->setStartDate($agreement->getEndDate()->modify('+1 day'));

＆＃13;

在div之前渲染浮动div之后指定的HTML元素

4 个答案: