在浮动布局中会产生浮动元素，它们不在文件流中占据空间，从而会导致页脚上升。例如我们之前说到的三列的浮动布局中：

<div class="content">
        <div class="primary">
            <div class="primary">
                your primary primary content goes here
            </div>
            <div class="secondary">
                your secondary primary content goes here
            </div>
        </div>
        <div class="secondary">
            navigation and secondary content goes here
        </div>
    </div>

    .content .primary{
        width: 670px;
        float: right;
        display: inline;
        height: 300px;
    }
    .content .secondary{
        width: 230px;
        float: left;
        display: inline;
        background: lightgreen;
        height: 300px;
    }
    .content .primary .primary{
        width: 400px;
        float: left;
        display: inline;
        background: rosybrown;
        height: 300px;
    }

    .content .primary .secondary {
        width: 230px;
        float: right;
        display: inline;
        background: saddlebrown;
        height: 300px;
    }
    .content {
        background: lightsalmon;
    }

效果图：

image.png

此时因为浮动元素没有占据空间导致父元素content的 background: lightsalmon;并未生效。及class为content的div并未被子元素撑开，变为了0。
此时我们再父元素加上以下代码：

   .content {
        overflow: hidden;
        background: lightsalmon;
    }

效果图：

image.png

overflow:hidden这个属性的作用是隐藏溢出，我们发现，在上面实验中，使用了overflow属性后，aBox的高度自动的被bBox 这个div的高度值给撑开了。

当父元素不使用overflow属性，子元素这个div又加上浮动这个属性的时候，它已经脱离了父元素div，也就是说，此时的子元素的宽高是多少，对于父元素来说，都是不起作用的。

而当我们给父元素这个div加上overflow:hidden这个属性的时候，其中的子元素带浮动属性的div对父元素的影响已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给父元素这个div设置高度的时候，子元素这个div的高度，就会撑开父元素这个div。
注意：这里清除的只是float属性对aBox的影响，但子div设定的浮动属性还是存在。

另外注意：若父元素的高度小于子元素，溢出的子元素高度会直接隐藏。是隐藏，并不是直接截除了。

    .content {
        overflow: hidden;
        background: lightsalmon;
        height: 50px;
    }

我们将父元素的高度定义为50px发现：

image.png

虽然看起来所有的子元素都为50px了，但是只是隐藏了 实际上还是300px。

借鉴：https://blog.csdn.net/qq_36470686/article/details/82846924 以及《精通css》