尽管有内容，React div 标签高度为零，

Question

在我的项目中，我有一个 class Pokedex 的 标签，其中包含一些 Pokecard 组件（在图片上可见），但是 div 标记始终为零，只有一次我在 CSS 中将其设置为 f.e。高度=1000px；高度设置正确。参见屏幕示例

我的代码： CSS:

.Pokecard img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.Pokecard p {
  text-align: center;
  margin: 3px;
}

.Pokecard {
  border: 1px solid black;
  width: 20%;
  max-width: 180px;
  min-width: 100px;
  border-radius: 10px;
  padding: 10px;
  background-color: rgb(235, 199, 238);
  float: left;
  margin: 2%;
}


.Pokedex {
  margin: auto;
  max-width: 700px;
  width: 95%;
  background-color: cornsilk;
  height: max-content;
}

图鉴组件：

  myProps = this.props.prokeList;
  render() {
    return (
      <div className="Pokedex">
        {[...this.myProps].map((e, index) => {
          return (
            <Pokecard
              key={`pk_${index}`}
              name={e.name}
              id={e.id}
              baseExperience={e.base_experience}
              type={e.type}
            />
          );
        })}
      </div>
    );
  }
}

扑克牌组件

class Pokecard extends React.Component {
    render() {
        return (
            <div className="Pokecard">
                <h3>{this.props.name}</h3>
                <img 
                src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/' +
                `sprites/pokemon/${this.props.id}.png`} alt={this.props.name}/>
                <p>Type: {this.props.type}</p>
                <p>EXP: {this.props.baseExperience}</p>
            </div>
        )
    }    
}

为什么会这样，我在浏览器检查器中看到 div.Pokedex 包含组件但高度为 0px？

已解决 参考 Danko 的回答，我将这个 clearfix 添加到我的 CSS:

.Pokedex::after {
  content: "";
  clear: both;
  display: table;
}

Answer 1

您的父元素已折叠，因为子元素是浮动的。使用 clearfix。