How do HEADER track the height of the internal elements?

Question

I have the following problem. Dude header does not automatically track the height of the internal elements. This is what happens when I set the css border-bottom:#DE5207 3px solid; to the header it does not display, because it always gets smaller height than the internal elements. I have tried to put height: auto but it doesn’t work.

*{
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}
div.principal{
  background-color: #ccc;
  margin: auto;
  box-sizing: border-box;
}

/* CABEÇALHO */

.cabecalho_topo{
  border-bottom:#DE5207 3px solid;
  height: auto;
}

/* Logomarca */

figure.logo{
  float: left;
  width: 21.42857142857143%; /* 300px */
  height: 80px;
  background-color: #FF8922;
}

/* Formulário de busca no Guia Comercial */

section.frmbuscaguia{
  float:left;
  width: 39.28571428571429%;
  height: 80px;
  background-color: #FF8922;
  text-align: center;
}
section.frmbuscaguia h1{
  font-size: 16px;
  color:#222;
  text-align: center;
  padding: 2% 2%;
 }
section.frmbuscaguia button{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}
section.frmbuscaguia input{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}

/* Menu do topo */

.menutopo{
  float: left;
  background-color: #FF8922;
  width: 39.28571428571429%;
  height: auto;
}
.menutopo a{
  color:#ffffff;
  text-decoration: none;
  font-size: 15px;
}
.menutopo ul{
  margin: 0px;
  padding: 0px;
}
.menutopo ul li{
  float:right;
  display: inline;
  padding: 0 20px 0 20px;
  line-height: 79px;
}
.menutopo ul li:hover{
background-color: #DD6900;
}

<div class="principal">
    <header class="cabecalho_topo">

        <figure class="logo">
            <img src="./imagens/logo.png">
        </figure>


            <section class="frmbuscaguia">
            <h1>Buscar no Guia Comercial</h1>
            <form>
                <input type="text" name="buscar">
                <button type="submit">Pesquisar</button>
            </form>
            </section>

        <nav class="menutopo">
            <ul>
                <li><a href="#" title="Quem somos">QUEM SOMOS</a></li>
                <li><a href="#" title="Anuncie">ANUNCIE</a></li>
                <li><a href="#" title="Contato">CONTATO</a></li>
            </ul>
        </nav>

    </header>


</div>

Answer 1

Is because of the float: left, then the element gets height:0 why the internal elements are with float.

You have to add an element with clear: both after, can create a pseudo-element, thus:

.cabecalho_topo::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

Upshot:

*{
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}
div.principal{
  background-color: #ccc;
  margin: auto;
  box-sizing: border-box;
}

/* CABEÇALHO */

.cabecalho_topo{
  border-bottom:#DE5207 3px solid;
  height: auto;
}

.cabecalho_topo::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

/* Logomarca */

figure.logo{
  float: left;
  width: 21.42857142857143%; /* 300px */
  height: 80px;
  background-color: #FF8922;
}

/* Formulário de busca no Guia Comercial */

section.frmbuscaguia{
  float:left;
  width: 39.28571428571429%;
  height: 80px;
  background-color: #FF8922;
  text-align: center;
}
section.frmbuscaguia h1{
  font-size: 16px;
  color:#222;
  text-align: center;
  padding: 2% 2%;
 }
section.frmbuscaguia button{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}
section.frmbuscaguia input{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}

/* Menu do topo */

.menutopo{
  float: left;
  background-color: #FF8922;
  width: 39.28571428571429%;
  height: auto;
}
.menutopo a{
  color:#ffffff;
  text-decoration: none;
  font-size: 15px;
}
.menutopo ul{
  margin: 0px;
  padding: 0px;
}
.menutopo ul li{
  float:right;
  display: inline;
  padding: 0 20px 0 20px;
  line-height: 79px;
}
.menutopo ul li:hover{
background-color: #DD6900;
}

<div class="principal">
    <header class="cabecalho_topo">

        <figure class="logo">
            <img src="./imagens/logo.png">
        </figure>


            <section class="frmbuscaguia">
            <h1>Buscar no Guia Comercial</h1>
            <form>
                <input type="text" name="buscar">
                <button type="submit">Pesquisar</button>
            </form>
            </section>

        <nav class="menutopo">
            <ul>
                <li><a href="#" title="Quem somos">QUEM SOMOS</a></li>
                <li><a href="#" title="Anuncie">ANUNCIE</a></li>
                <li><a href="#" title="Contato">CONTATO</a></li>
            </ul>
        </nav>

    </header>


</div>