子要素に応じて親要素ブロックの高さを自動調整させたい。

前提・実現したいこと

div親要素、子要素の高さを指定せずに、子要素の画像やテキストに応じて、子要素の高さが自動調整（auto）され、かつ、親要素でも子要素に応じて自動で高さ調整されるようにしたいです。
なお、以下のデモサイトを模写しており、フッターを作っているところでこの問題にぶつかりました。
https://jin-demo.jp/demo-4/

以上、よろしくお願いいたします。

発生している問題・エラーメッセージ

div親要素と子要素のCSSにおいて、どちらもheight:auto;とすると表示がされない。
親要素を適当にheight:500pxなど指定してあげると、表示がうまくいく。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>模写</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="footer">
        
          <div class="footer-left">
              <div class="footer-left__text">
                  <p class="text1">
                      <img class="logo" src="https://jin-theme.com/wp-content/uploads/2018/03/logo_white@2x.png">
                      <br>
                      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                  </p>
                  <p class="text2">
                     「アフィリエイト」と「SEO」に必要なものは、すべて詰め込みました。売れるサイト作りを確実に後押しします。 
                  </p>
              </div>
          </div>
        
    </div>

該当のソースコード

CSS
1body{
2    font-family: "Noto Sans Japanese",sans-self;
3    margin: 0;
4    padding: 0;
5}
6.footer{
7    width:100%;
8    height:auto;
9    bottom:0;
10    background-color:#393542;
11}
12
13.footer-left{
14    width:30%;
15    float:left;
16    height:auto;
17}
18.footer-left__text p{
19    font-size:13.6px;
20    color:white;
21    margin-top:13.6px;
22    display:block;
23}
24.logo{
25    display:block;
26    width:120px;
27    height:59px;
28    margin:0 auto;
29}

試したこと

親要素の高さを500pxにしてみたら、うまく表示はできた。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

フッターの子要素に float:left; を設定してますが、これを設定するとこの要素は浮いた状態になるので、親要素は高さを設定しない(height:auto;)と、高さ0になります。

横並びは、float ではなく FlexBox でするようにしましょう。模写先も FlexBox を使ってます。

css
1.footer{
2    width:100%;
3    height:auto;
4    bottom:0;
5    background-color:#393542;
6    display:flex; /* 追加 */
7}
8
9.footer-left{
10    width:30%;
11/*    float:left; 削除 */
12    height:auto;
13}