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

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

我的代码： CSS:

Pokedex组件：

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

---

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

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

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

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