Vue笔记 -- CSS之清除浮动

一、代码如下

HTML

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="footer"></div>

CSS

       .container {
            border: 4px solid red;
            overflow: hidden;
        }
        .left {
            width: 100px;
            height: 400px;
            background-color: #482;
            float: left;
        }
        .right {
            width: 200px;
            height: 400px;
            background-color: #d96;
            float: right;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: #129;
        }

1、父元素设置 overflow: hidden;

优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

2、使用:after 伪元素（推荐）

        .container::after {
            content: '';
            display: block;
            clear: both;
        }