完美解决浮动产生的影响

-浮动-，相信对于很多前端的同学都不是事，不过最近有后端小哥哥向我询问关于浮动的问题，下面我就简单介绍一下浮动会产生什么问题，并且该怎样去解决，相信聪明的你一看就懂了。

在讲浮动之前，首先声明一下行内元素和块级元素的概念：简单来说，行内元素就是不可设置宽高，且与其它元素并排显示的元素（a、img标签等），而块级元素是可以设置宽高且独占一行的元素（p、div标签等）。

display：block;                   行内元素转块级元素

display：inline                    块级元素转行内元素

display：inline-block           (行内块)即可以设置宽高又可以并排显示

元素浮动后，会脱离标准文档流。脱标的元素不再区分块级元素和行内元素，即既可以设置宽高又可以并排显示。

元素浮动产生的影响：

1、浮动的元素不能撑高父盒子

2、浮动元素会影响后面浮动的元素（元素异位）

如下：

        .box {
            border: 10px solid #000;
            /* overflow: hidden; */
        }
        .fl {
            float: left;
        }
        .lb {
            background: lightblue;
        }
        .pk {
            background: pink;   
        }

    <div class="box">
        <span class='fl pk'>111111111111</span>
        <span class='fl lb'>111111111111</span>
    </div>
    <div class="box">
        <span class='fl pk'>111111111111</span>
        <span class='fl lb'>111111111111</span>
    </div>

完美解决：只需为父元素设置 overflow： hidden样式就可以了

解开注释后

解决办法还有很多，如为父元素设置高度，外墙法、内墙法等，不过都有一定的问题，感兴趣的同学可以自行上网了解。