JSFiddle - React, Tailwind, and code Playground

HTML

No overflow:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats  </p>
<br>
With overflow: hidden
<ul id="two">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

CSS

ul{
    list-style-type:none;
    margin:0; padding:0;
    background-color:#dddddd;
    border:1px solid red;
}
li{
    float:left;
}
a{
    display:block;
    width:60px;
}
p{
    margin:0;
    outline:1px dotted blue;
}
#two{
    clear:both;
    overflow:hidden;
}