html - 为什么在应用填充时 <p> 结束在另一个 <div> 中，而不是在其中扩展 div？

Question

为什么是<p>结束于另一个 <div>应用填充时，而不是在其中扩展 div？

这是我的代码。最终，我试图向 <p> 添加一些填充。元素将其向下推，但在其 div 内。

我将在右上角有一个按钮，我希望它下方有文本，但不被按钮覆盖。按钮将是 z-index:999 以及与其 div 的相对位置。

编辑:这是完整代码的外观，试图包含内容。 Clearfix 在这里不起作用，按钮有 z-index:1 所以应该在最上面？

  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
  
  .header {
    background-color: bisque;
  }
  
  .wrap {
    max-width: 960px;
  }
  
  .content h1 {
    display: inline-block;
    padding-top: 0px;
  }
  
  .content p {
    float: right;
    padding-top: 0px;
  }
  
  .button {
    background-color: red;
    position: relative;
    right: 0;
    top: 0;
    z-index: 1;
    float: right;
  }

<header class="header ">
  <div class="wrap clearfix">
    <div class="content ">
      <h1>left</h1>
      <p>right</p>
      <a href="#" class="button">button</a>
    </div>
  </div>
</header>

Answer 1

这是因为元素是 float 的，父类需要“清除” float ，这样元素才不会出现在父类之外。您可以查找 CSS“clearfix”技术以清楚地说明问题和解决方法。

我添加了一个新的 .clearfix 类，其中包含一种流行的清除 float 子元素的技术。

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.first {
    background-color: bisque;
  }
  
  .first h1 {
    display: inline-block;
    padding-top: 10px;
  }
  
  .first p {
    float: right;
    display: inline-block;
    padding-top: 15px;
  }
  
  .second {
    background-color: grey;
  }
  
  .third {
    background-color: teal;
  }

<div class="first clearfix">
      <h1>I expand "first" div with padding</h1>
      <p>I do not expand, I am outside "first" div. End up on top of another div... Why?? </p>
    </div>
    
    <div class="second">
      <p>section 2 text</p>
    </div>
    
    <div class="third">
      <p>section 3 text</p>
    </div>