html - 为什么我的文本显示在 div 之外？

Question

我无法弄清楚出了什么问题，我对下面代码的期望是文本应该显示在标有蓝色背景和边框的 div 内，但它显示在 div 下方，为什么会这样？

.item-header {
  background-color: rgb(0, 246, 246);
  padding-right: 10px;
  padding-left: 10px;
  border-style: double;
  height: 20px;
}

.alignleft {
  background: transparent;
  float: left;
  width: 150px;
}

.alignright {
  background: transparent;
  float: right;
}

<div class="item-header">

  <p class="alignleft">Author: {{post.author}}</p>
  <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5
    <ion-icon name="create" item-right></ion-icon>
  </p>

</div>

Answer 1

首先，您需要从 .item-header{ 中删除 height然后另一个问题是 float 。如果您在元素内 float 元素，它会降低高度。一种解决方案是使用伪元素 (:after) 清除 float ，看看:

.item-header:after {
  content: '';
  display: block;
  clear: both;
}

.item-header{
  background-color: rgb(0,246,246);
  padding-right: 10px;
  padding-left: 10px;
  border-style: double;
  /*height: 20px;*/
}

.item-header:after {
  content: '';
  display: block;
  clear: both;
}

.alignleft {
  background: transparent;
  float: left;
  width: 150px;
}
.alignright {
  background: transparent;
  float: right;
}

 <div class="item-header"  >

  <p class="alignleft">Author: {{post.author}}</p>
  <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5
     <ion-icon name="create" item-right ></ion-icon>
  </p>

 </div>