Question

我在h1元素下并排制作了两个浮动段落，所有段落都包含在div中。当我将边框应用于整个div时，浮动的段落不包含在其中。以下句子不包含在绿色边界内：

<div class="about">
  <h1 id="aboutLink">About</h1>
  <p id="col1of2">The quick brown fox jumps over the lazy dog. </p>
  <p id="col2of2">The quick brown fox jumps over the lazy dog. </p>
</div>

#col1of2, #col2of2 {
  width:  30%;
  margin-left: 14%;
  float: left;
  padding-bottom: 15px;
  margin-bottom: 100px;
  margin-top: 50px;
} 

.about {
   border: green solid 3px;
}

在这里看一个js-fiddle： https://jsfiddle.net/6aaruxLd/3/

任何人都可以解释为什么会这样吗？

Answer 1

因为float的元素超出了文档的正常流程。您需要在它们之后添加clear:both元素来修复它：

    <div class="about">
        ...
        <br style="clear:both;" />
    </div>

Fiddle Example

浮动段落不包含在<div> Border中

1 个答案: