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

Question

为什么<p>在应用填充时会以另一个<div>结尾，而不是将div扩展为？

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

我会在右上方有一个按钮，我想在它下方显示文字，但按钮没有覆盖。按钮将是z-index：999以及相对于其div的位置。

编辑：这是完整代码的外观，试图包含内容。 Clearfix不在这里工作，按钮有z-index：1所以应该在顶部？

＆＃13;

＆＃13;

  .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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为元素是浮动的，父元素需要“清除”浮点数，以便元素不会出现在父元素之外。您可以查找CSS“clearfix”技术，以清楚地说明问题以及解决问题的方法。

我添加了一个新的.clearfix课程，其中有一种流行的技术可以清除漂浮的孩子。

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

Answer 2

.first p {
  float: right;  // remove this
  display: inline-block;
  padding-top: 15px;
}

只需从代码中删除float: right即可。

Answer 3

你可以google它的clearfix问题。

当孩子浮动时，父母不会包含它，这就是你的p标签熄灭的原因。

＆＃13;

＆＃13;

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    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;
  }

＆＃13;

<div class="first cf">
      <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>
    

＆＃13;

＆＃13;

＆＃13;