清除浮动导致的父容器高度塌陷

版权声明：本文为博主原创文章，转载请注明出处：http://blog.csdn.net/sinat_34820292 https://blog.csdn.net/sinat_34820292/article/details/80753342

这个问题时常遇到，要用到了总是用不对，绕点弯路，还好很好搜到，这里给自己做个demo，方便下次使用。

<style>
        *{
            padding: 0;
            margin: 0;
        }
        article {
            height: 20px;
            background-color: red;
        }

        header{
            background-color: green;
        }
        ul {
            width: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            overflow: hidden;
            /*解决问题的关键*/
            zoom: 1;
            /*兼容低版本IE */
        }

        ul>li {
            display: block;
            width: auto;
            float: left;
            border: 1px solid #c2c2c2;
        }
    </style>

    <header>
        <ul>
            <li>选项111111a</li>
            <li>选项111111b</li>
            <li>选项111111c</li>
            <li>选项111111d</li>
            <li>选项111111e</li>
            <li>选项111111f</li>
            <li>选项111111g</li>
            <li>选项111111h</li>
            <li>选项111111i</li>
            <li>选项111111j</li>
        </ul>

    </header>
    <article>
         in article 
    </article>