HTML布局（浮动）

传统的网页布局：标准流+浮动+定位

        标准流：标签按照显示规则排列；

        浮动：可以让多个块级元素在同一行显示；

        定位：实现元素的精准定位；

浮动：浮动的盒子会脱离标准流（脱标）

解决脱标：

        1.额外标签法：

        2.给父盒子添加overflow:hidden;

        3.给父元素添加after伪元素

.clearfix::after{
    content: "";/* 内容为空 */
    display: block;/* 显示模式:块元素 */
    height: 0;
    visibility: hidden; /* 可见性:隐藏 */
    clear: both;/* 清除两端浮动 */
}

        4.给父元素添加after和before双伪元素

.clearfix::after,.clearfix::before{
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}