为什么这个标题没办法显示在顶部

Question

为什么这里面的标题不是出现在顶上而是出现在左侧边，还是竖着的，我不理解，这是为什么😭

这个是css代码

.jianjie {
    display: flex;
    background-color: darkgrey;
    top: 20px;
    width: 80%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;

}

.jianjie h2 {
    display: flex;
    float: left;
    font-family: 宋体;
    font-size: 30px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.jianjie p {
    font-size: 20px;
    font-family: cursive;

}

这个是html代码

<div class="jianjie">
                <h2>中国美食文化简介</h2>

                <p>中国饮食文化是有着长远历史，博大精深的中国文化。

                </p >
            </div>

p标签里面文字有点多，删了一点

Answer 1

因为你jianjie 设置了display:flex 所以都去一行了，去掉就是上下布局了