浮动(flot)

浮动(flot)

脱离标准文档流(但不脱离文本流)
影响：会破坏布局，导致布局错乱
规范：一般同级之间有一个加，其他的也要加
问题：浮动会导致父级盒子塌陷

解决方法：

1、父级盒子加高

             缺点：不能自动撑开，高度需要自己计算且是固定值，不够灵活

.bigbox{
            height: 54px;
        }

2、溢出隐藏(overflow:hiddn)

            可以自动撑开但是会导致溢出部分无法显示

.bigbox{
            overflow: hidden;
        }

3、加一个无内容的空盒子使用清楚浮动(clear:both)

            (必须无语义无宽高)
            clear:both (清楚左右浮动的影响)

.box5{
            clear: both;
        } 

4、父盒子加伪类属性(::after 会在后面自动生成一个盒子)

            ::after
    左浮动：left
    右浮动：right

.content::after{
            /* 内容 */
            content: '';
            /* 转为块 */
            display: block;
            /* 清除浮动影响 */
            clear: both;
        }