浮动元素高度塌陷

子元素设置了float样式之后，脱离了正常的文档流，父元素的高度没有被相应撑开，导致了父元素的高度塌陷。

有若干方法可以消除子元素浮动造成的父元素高度塌陷：
如图示例：

设置父元素的高度

父元素也浮动

插入清除浮动元素

插入伪元素

父元素设置溢出隐藏样式

三列经典布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除样式 */
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        /* 设置链接 */
        a{
            color: grey;
            font-size: 20px;
            height: 30px;
            line-height: 30px;
        }
/* 头部设置，清除Li的浮动影响 */
        .head{
            background-color: lightskyblue;
            /* border: 1px solid red; */
            overflow: hidden;
        }
       /* li设置浮动 */
        li{
            float: left;
            padding: 10px 40px;
            /* border: 1px solid blue; */
        }
        .foot{
            background-color: lightskyblue;
        }
        /* 底部设置 */
        .foot span{
            text-align: center;
            display: block;
            margin: 0 auto;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            color: lightslategrey;
        }
/* min-height一定要设置高度，否则会因为子div定位或浮动造成高度塌陷 */
        .body1{
            width: 980px;
            min-height: 620px;
            background-color: wheat; 
            margin: 0 auto;
            position: relative;
        }        
        .left{
            width: 200px;
            min-height: 600px;
            /* float: left; */
            background-color: magenta;
            position: absolute;
            top: 10px;
            left: 0;
        }
        /* 居中设置 */
        .middle{
            width: 560px;
            min-height: 600px;
            background-color: lightseagreen;
            /* float: left; */
            position: absolute;
            top: 10px;
            left: 210px;
        }
        .right{
            width: 200px;
            min-height: 600px;
            /* float: left; */
            background-color: mediumslateblue;
            position: absolute;
            top: 10px;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="head">  
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">618会场</a></li>
            <li><a href="">在线客服</a></li>
        </ul>
    </div>
    <div class="body1">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
    <div class="foot">
        <span>xxxxxx有限公司© | 备案号: 皖ICP *********</span>
    </div>
</body>
</html>