网页浮动塌陷的解决办法

我们初学者在练习制作网页时，时常会遇到一些情况，父盒子不方便给高度，子盒子又给浮动脱离了文档流，空间释放，就会导致父元素高度为零，这就叫浮动塌陷。

    .father{
        width: 500px;
        background-color: aqua;
    }
    .child{
        float: left;
        background-color:blue;
        width: 39px;
        height: 39px;
    }

这样子元素没撑起来就是这个效果。

这时候就需要我们清除浮动带来的影响，有三种方法：

1.我们可以给父元素一个固定高度，但是当我们以后需要再加入元素时，还需要再修改，不方便。

2.在浮动元素的后面加一个div块，样式写clear:both;

出来就是这个效果，因为在CSS样式中，clear就是用来清除产生的浮动，来保证以后的元素不受影响。

由此我们可以在在页面初始化的时候直接写个

    .clearfix::after{
        content:"";
        display: block;
        clear: both;
    }

 然后谁浮动了，就把谁命名为clearfix，下面的元素就不会受到影响,将清除浮动变成模块化的东西，想要可以直接用。

3.给父元素设置 overflow：hidden 原意为溢出隐藏，但是因为触发了BFC块级化格式上下文 就会按照bfc的规则渲染画面 bfc规则为浮动的元素也参与计算高度。

以上就是我总结的网页浮动塌陷处理办法