尽管有内容，但反应 div 标签高度为零，答案

【问题标题】：React div tag height is zero despite having content,尽管有内容，但反应 div 标签高度为零，
【发布时间】：2020-07-16 01:03:04
【问题描述】：

在我的项目中，我有一个 Pokedex 类的标签，其中包含一些 Pokecard 组件（在图片上可见），但是，div 标签的高度始终为零，只有在我将其设置为CSS 作为 fe高度=1000像素；高度设置正确。例如查看屏幕

我的代码： 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;
}

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

Pokecard 组件

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

【问题讨论】：

标签： html css reactjs google-chrome-devtools

【解决方案1】：

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

【讨论】：