高度塌陷问题的解决办法

今天我们来看看非常常见的一个问题，那就是高度塌陷问题，我相信很多朋友在布局的时候都会遇到高度塌陷问题，那么今天我们来看看如何解决它。

高度塌陷

我们在设置父元素的时候一般都不会设置它的高度，我们通常会给里面填内容，让父元素被子元素撑开。那么这个时候就出现问题了，如果子元素浮动，那么父元素的宽度就会塌陷。这样我们的页面就会混乱，这就是我们一般说的高度塌陷问题。

高度塌陷的解决办法

一、给父元素设置一个高度

       这样可以给父元素一个高度让他不会塌陷，但是非常不推荐使用。

二、开启BFC （Block Formatting Context）

        当元素开启BFC之后，元素会变成独立的区域，不会在布局上影响外面的元素。

        我们可以把BFC可以理解为一个封闭的大箱子，箱子里可以装很多乱七八糟的东西，这并不影响外面的事物。所以同理元素开启BFC之后不会影响外面元素。

三、高度塌陷的第三种解决办法（完美）

         用clear属性

         在高度塌陷的父元素的最后加一个空白的div，由于这个div没有浮动，使用可以撑开父元素的高度，然后对这个空白的div进行清除浮动。不一定的是div，其他块元素都可以

         基本没有副作用

如下图所示

.box3{
            clear: left;
        }

四、高度塌陷的第四种解决办法(完美)

        这个办法是基于第三种办法转变过来的

        就是运用用伪类::after

如下图所示

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