CSS浮动

1.脱离标准文档流

影响：破坏了布局，导致布局错乱

2.不脱离文本流

规范：同级之间，加float 属性，其余也要加

 .div1{

            width: 50px;

            height: 101px;

            background-color: pink;

            float: left;

        }

        .div2{

            width: 500px;

            height: 102px;

            background-color: yellow;

            float: left;

        }

浮动导致  父级盒子塌陷

解决方法：

1.父级盒子加高（不能自动撑开，高是固定的，不够灵活）

 /* height: 102px; */
         

2.父级盒子加 overflow:hidden; (导致溢出的部分无法显示)

            /* 溢出隐藏 */
            /* overflow: hidden; */

3.加一个无内容的空盒子：clean:both; (必须无意义宽高)

 <!-- <div style="clear: both;"></div> -->

4.父盒子加伪类属性：：after { content:''; display:block; clear:both} 添加无意义空盒子的效果不受影响

.clearfix::after

.clearn::after

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

        }