css浮动问题,浮动排列显示，不在一行显示，怎么回事呢，希望大家帮我解答

当我给.banner-nav ul li加了个height:20px就好了，这时为什么呢

 .banner-nav {
            height: 20px;
            margin-top: 20px;
        }
        
        .banner-nav ul li {
            float: left;
            height: 20px;
            /* 一开始没加就是第一张图效果 加了之后就好了   */
            color: #ccc;
        }
        
        .banner-nav ul li:nth-child(-n+3)::after {
            content: '';
            font-family: 'icomoon';
        }
        
        .content {
            height: 600px;
        }
        
        .content .iphone {
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin-top: 5px;
        }
        
        .content .message {
            float: left;
        }

  <div class="banner-nav w">
        <ul>
            <li>
                <a href="#">手机、数码、通讯</a>
            </li>
            <li>
                <a href="#">手机</a>
            </li>
            <li>
                <a href="#">Apple苹果</a>
            </li>
            <li>
                <a href="#">iphone 6S Plus系统</a>
            </li>
        </ul>
    </div>
    <div class="content w">
        <div class="iphone"></div>
        <div class="message">
            <h3>wwwqqqqqqqqqqqqqqqqqqqqq</h3>
        </div>
    </div>

ul节点高度塌陷了，子节点使用float后会引起父节点的高度塌陷，给父节点添加overflow: hidden;就可以了
ps: html节点使用float之后 该节点会脱离文档流，脱离文档流的意思就是脱离的父节点的控制。父节点监听不到子节点的高度就会导致高度塌陷，解决高度塌陷最简单的办法就是给父节点添加 overflow: hidden;
.banner-nav ul {
overflow: hidden;
}

flex很香的