Dúvida sobre a propriedade float

Fiz a página do portfolio do João da Silva usando a propriedade float nos elementos li do container ul class="imagens-trabalhos"

Contudo, ao fazer isso, embora as imagens ficassem posicionadas de maneira adequada, o container ".imagens-trabalhos", delimitado pela tag ul, perdia sua altura, ficando com height: 0.

Desse modo, as imagens acabavam ficando com a visibilidade obstruída pelo rodapé fixo da página.

Para resolver o problema, então, adicionei uma altura absoluta em pixels ao elemento ".imagens-trabalhos".

Minha dúvida é:

Por quê, ao fazer com que os elementos do container ".imagens-trabalhos" flutuem, sua altura se torna automaticamente 0?

/*código css*/
.imagens-trabalhos li {
    background-color: #FAFFFC;
    padding: 16px;
    border: solid black 8px;
    margin-right: 16px;
    margin-bottom: 16px;
    width: 45%;
    box-sizing: border-box;
    float: left;
}
.imagens-trabalhos {
    height: 587px;
}

<!-- código html -->
    <main class="conteudo-texto">
            <h1>Portfolio</h1>
            <div class="contem-imagens">
                <h2>Veja abaixo meus principais trabalhos</h2>
                <ul class="imagens-trabalhos">
                    <li>
                        <a href="http://bmw.com">
                            <figure class="bmw">
                                <img class="site-bwm" src="imagens/bmw.png" alt="imagem do trabalho para o website da BMW">
                                <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>    
                        <a href="http://uol.com.br">
                            <figure class="uol">
                                <img class="site-uol" src="imagens/uol.png" alt="imagem do trabalho para o portal UOL">
                                <figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.ibm.com.br">
                            <figure class="ibm">
                                <img class="site-ibm" src="imagens/ibm.png" alt="imagem do trabalho para o website da IBM">
                                <figcaption> IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                            </figure>
                        </a>
                    </li>
                    <li>
                        <a href="http://g1.com.br">
                            <figure class="g1">
                                <img class="site-g1" src="imagens/g1.png" alt="imagem do trabalho para o portal G1">
                                <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
            </div>
        </main>